부드러운 페이지 스크롤 적용하기 smooth scroll :: 제이쿼리

부드럽게 내려가는 스크롤 스크립트 구하는 것은 어렵지 않다.

검색창에 smooth scroll이라고만 쳐도 많은 정보를 얻을 수 있다.

https://idiotwu.github.io/smooth-scrollbar/

https://github.com/kswedberg/jquery-smooth-scroll

나는 그 중에서 github에서 다운 받은 부드러운 스크롤을 적용해봤다.

위 주소에서 받을 수 있다.

압축된 파일을 풀어보면 demo폴더가 있다.

거기서 index를 열어보면

위와 같은 화면이 p1버튼을 눌러 부드럽게 내려가는 것을 확인 할 수 있다.

그래서 이 파일과 연결된 파일

  <script src="../lib/jquery/jquery.js"></script>
  <script src="../src/jquery.smooth-scroll.js"></script>
  <script>
    $(document).ready(function() {
      $('body').smoothScroll({
        delegateSelector: 'ul.mainnav a'
      });
      $('p.subnav a').click(function(event) {
        event.preventDefault();
        var link = this;
        $.smoothScroll({
          scrollTarget: link.hash
        });
      });
    });
  </script>

제이쿼리 폴더에 있는 jquery.js, smooth-scroll.js

연결하고

스크립트는 나는 다 필요 없고 메뉴클릭시 내려가는거랑 하단에서 클릭했을때 올라가는거 저거 두개만 필요해서 두개만 가져왔다.

이렇게 적용시키면 부드럽게 내려가는 페이지 스크롤을 확인 할 수 있다.

smoothScroll 그런데 자꾸 찾을 수 없다는 오류가 떠서

바텀부분 버튼 클릭했을때 스크립트는 없앴다.

어차피 같이 적용되도 상관 없으니

$(document).ready(function() {
 
      $('body').smoothScroll({
        delegateSelector: '#nav ul li a, footer .up'
      });
 
    });

이렇게 수정하니 잘 돌아간다.