❏jquery - 상단 스크롤 이동 버튼 만들기! (스크롤 up버튼 만들기)
안녕하세요!
벌써 올해 22년도 내일이면 마지막이네요! 다들 행복한 연말을 보내시고 계신지요?
저는 포트폴리오를 만들면서 22년도의 마지막 분기를 보냈습니다,
포트폴리오에 사용했던 스크롤 업 버튼을 한번 가지고 왔는데요.
제이쿼리로 작성이 된 코드이니 쉽게 사용하실 수 있으실 겁니다!
오늘 만들어 볼 친구는 이 친구입니다!
여하튼 바로 만나보러 가시죠!
✎ html
html은 크게 작성할 것이 없습니다!
원하시면 이미지 파일로 아예 넣으셔도 되시고 아니면 저처럼 아이콘을 넣으셔도 됩니다.
<a id="toTop" href="#" style="color: white;">
<i class="fa-solid fa-arrow-up"></i>
<br>
UP
</a>저는 이렇게 작성한 코드를 footer가 시작되는 부분에 넣어주었습니다.
보통 스크롤 버튼이 footer밑에 있으면 아닌 것 같아서요! (개인적인 의견입니다.)
여하튼 작성해주시면 됩니다.
✎ css
#toTop {
position: fixed;
bottom: 160px;
display: none;
z-index: 99999;
right: 30px;
text-align: center;
background-color: #b8b8b87d;
padding: 10px;
font-weight: bold;
box-shadow: 2px 2px 2px rgb(252, 251, 251);
}버튼이 항상 고정되어 있어야 하기 때문에 position: fixed; 속성을 주었답니다.
버튼이 가려지지 않고 항상 맨 앞에 와야 하기 때문에 z-index: 99999;로 주었고요!
그리고 마지막으로 이 버튼이 항상 떠 있는 것이 아니고 어느 정도 스크롤이 내려가야지만 보여야 하기 때문에
display: none;으로 속성값을 주었어요!
그리고 나머지 백그라운드 색상이나 다른 속성값들은 주시고 싶은 대로 주시면 됩니다!
✎ jquery
$(function() {
// 보이기 | 숨기기
$(window).scroll(function() {
if ($(this).scrollTop() > 550) { //500 넘으면 버튼이 보여짐니다.
$('#toTop').fadeIn();
$('#toTop').css('left', $('#sidebar').offset().left); // #sidebar left:0 죄표
} else {
$('#toTop').fadeOut();
}
});
// 버튼 클릭시
$("#toTop").click(function() {
$('html, body').animate({
scrollTop : 0 // 0 까지 animation 이동합니다.
}, 400); // 속도 400
return false;
});
});저는 스크롤 값이 500이 넘으면 버튼이 보이도록 설정해 두었는데요
만약 사용하시는 페이지에 맞게 설정을 해두시면 됩니다!
그리고 이동한 곳이 페이지의 최상단이기 때문에 scrollTop : 0는 변하면 안 됩니다.
만약 부분적으로 나누고 싶다면 더 세세하게 나누셔서 적으시면 될 것 같습니다!
그리고 스크롤이 되면서 움직이는 화면의 속도를 저는 400으로 주었는데 적당한 것 같더라고요.
만약 속도를 더 높이고 싶으시면 400보다 더 높은 값을 더 내리고 싶으시다면 400보다 낮은 값을 주면 됩니다!
그러면 이렇게 정해진 스크롤 값이 되면 나타났다가 없어지는 버튼이 만들어집니다 ~
오늘도 읽어주셔서 감사합니다!
^-^