[jquery] 부드럽게 화면 상단으로 이동하는 버튼 만들기

웹페이지에서 흔히 볼 수 있는 화면 상단 이동 버튼.

본문 내용이 길어 스크롤바가 길 때, 최상단으로 한번에 이동할 수 있어서 매우 편리한 기능.

거의 모든 사이트나 앱에서 필수적으로 들어가는 버튼이다.

보통은 그냥

<a href="#" class="page-top">TOP</a>

이렇게 쓸 수도 있지만..

이대로 쓰면 갑자기 뿅~ 하고 최상단으로 이동해 버리게 된다. 보기 좋지 않음..

그래서 보통은 부드럽게 스크롤이 이동하도록 스크립트를 겸해서 쓴다.

 

jquery

$(".btn_top").on('click', function(){
    $('body, html').animate({ scrollTop: 0 }, 300 );
    return false;
});

이렇게 하면 스르륵 스크롤 되면서 최상단으로 이동 함.

 

근데 여기서 한 단계 더 나아가

스크롤이 최상단일때는 btn_top 버튼을 가렸다가

일정 높이 이상 스크롤을 하게 되면 버튼이 나타나도록 해보자.

jquery

$(window).scroll(function () {
    var scrollValue = $(document).scrollTop();
    if (scrollValue > 300) {
        $(".btn_top").addClass("on");
    } else {
        $(".btn_top").removeClass("on");
    }
});

css

.btn_top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background: orange;
  transition: all .4s ease;
  opacity: 0;
}
.btn_top.on{
  bottom: 20px;
  opacity: 1;
}

css까지 적용해 주고 나면 버튼도 스르륵 나타나는 것을 볼 수 있다.

지금 이 블로그에도 하단 오른쪽에 같은 스크립트의 버튼이 있다.

스크롤버튼 만들기, 스크롤버튼, 화면 상단 이동, 상단 이동버튼, scrolltop버튼, 탑버튼, top button, 상단 이동, 최상단 이동, 부드러운 스크롤, 스크롤 이동, scrolltop animate