[jQuery] smooth scroll to top 페이지 상단으로 부드럽게 이동하기

JavaScript
jQuery('a[href="#top"]').click(function(e){
    e.preventDefault();

    jQuery('html, body').animate({
        scrollTop: 0
    },500)
});
<a href="#top">Scroll to Top</a>

#top 이라는 주소를 가진 링크를 클릭하면 스크립트가 작동한다.

http://abc.com/#top 과 같이 주소 뒤에 #top이 붙지 않게 하기 위해 preventDefault 로 기존 링크의 기능을 제거시켰다.

500을 원하는 숫자로 조절해 스크롤 속도를 지정 할 수 있다.

관련 글

  1. fade in, fade out 되는 위로가기 버튼
  2. Firefox에서 javascript:scroll(0,0) 안될 때
  3. 페이지 하단으로 이동하는 버튼
  4. 페이지 맨 위로 이동하는 버튼
smooth scroll to top맨위로부드럽게 올라가는 스크롤바최상단으로
블로그
프로젝트
스터디