728x90
728x90
Html
<a href="#" class="top">
<i class="xi-angle-up"></i>
</a>
<a href="#" class="down">
<i class="xi-angle-down"></i>
</a>
Css
.top {
position: fixed;
right: 5%;
bottom: 100px;
background-color:#fff;
border:1px solid #d9d9d9;
color:#333;
text-decoration:none;
z-index:99;
width:50px;
height: 50px;
display:flex; align-items:center; justify-content:center;
}
.down {
position: fixed;
right: 5%;
bottom: 50px;
padding:10px;
background-color:#fff;
border:1px solid #d9d9d9;
color:#333;
text-decoration:none;
z-index:99;
width:50px;
height: 50px;
display:flex; align-items:center; justify-content:center;
}
Jq
$( document ).ready( function() {
// 처음에는 안보이게 숨기기
$(".top").hide();
// 스크롤 탑 + fadein 효과
$(window).scroll(function(){
if( $(this).scrollTop() > 200){
$(".top").fadeIn();
}
else{
$(".top").fadeOut();
}
});
//클릭했을 때 스르륵 올라가도록 애니메이션 효과
$(".top").click(function(){
$('body,html').animate({
scrollTop:0
},400 );
return false;
});
});
$( document ).ready( function() {
// 처음에는 안보이게 숨기기
$(".down").hide();
// 스크롤 탑 + fadein 효과
$(window).scroll(function(){
if( $(this).scrollTop() > 200){
$(".down").fadeIn();
}
else{
$(".down").fadeOut();
}
});
//클릭했을 때 스르륵 올라가도록 애니메이션 효과
$(".down").click(function(){
var offset = $("#footer").offset();
$('body,html').animate({
scrollTop: offset.top
},400 );
return false;
});
});
반응형
'Code > Html' 카테고리의 다른 글
버튼 클릭 시 주소 복사하기 (0) | 2024.02.27 |
---|---|
체크박스 커스텀하기 (0) | 2024.02.05 |
Div에 placeholder 구현하기 (0) | 2024.01.15 |
반전효과있는 마우스 커서 만들기 (0) | 2024.01.04 |
Select 에서 Option 클릭 시 이동 (0) | 2023.12.11 |