Smooth Scrolling(제이쿼리 플그인, css속성)

jQuery 플러그인: [ jquery.scrollTo.min.js ]

 

<!-- Smooth Scroll -->

<script>

    $('선택자').click(function(){

        $.scrollTop(this.hash || , 2000); ← 밀리초

        e.preventDefault();

    })

</script>

 

html {scroll-behavior: smooth;}

** IE에서 적용 안된다. 속도를 조절할 수 없다.

 

-----------------------------------------------------------------------------------------------------------------------------------

https://www.youtube.com/watch?v=vh5hDOjeVvk&t=982s

KEYWORDS:

index() / eq() / offset(), top / animate({scrollTop: }) / scrollTop() / each() / 

$(window).scroll(function(){})

 

 

$(function(){

    var $menu = $('.menu ul li'), ← 메뉴 버튼들

    var $contents = $('.contents div'); ← 컨텐츠 선택

 

    /* $menu를 클릭하면 해당 요소에만 클래스명 "on" 추가 */

   ↓ 메뉴 클릭 시 컨텐츠로 이동

    $menu.click(function(e){

        e.preventDefault(); ← a의 기본 기능을 제거 (href="#컨텐츠")

        $menu.removeClass('on'); ←우선 모든 메뉴버튼들에게서 on을 제거. [1]

        $(this).addClass('on'); ← 클릭한 대상에게만 on을 추가. [1]

        ★$(this).addClass('on').siblings().removeClass('on') ← 위 코드 두줄을 한줄로 해결. [2]

 

        var idx = $(this).index(); ← 클릭한 대상의 인덱스 번호를 idx에 저장.

        var section = $contents.eq(idx) ← 메뉴(li)의 인덱번호를 활용해 $contents에 인덱스번호와 호환(연결).

        var sectionDistance = section.offset().top; ← 섹션의 거리 구하기.

        $('html, body').stop().animate({scrollTop: sectionDistance}); ← html의 스크롤량을 sectionDistance로준다!!(body                                                                                          만 선택 시 작동하지 않는다.)

    })

    ↓ 스크롤 시 메뉴 버튼에 on 추가. (현재 위치를 알려준다.)

    $(window).scroll(function(){

       $contents.each(function(){

               if($(this).offset().top <= $(window).scrollTop()){ ← 만약 "이 것(각각의 컨텐츠)"의 offset.top(브라우저 상단                                                                                  에서의 위치)값이 윈도우의 스크롤량보다 작거나 같다면,

                   var idx = $(this).index(); ← 컨텐츠의 인덱스값을 저장, 메뉴의 인덱스번화와 호환(연결).

                   $menu.removeClass('on');

                   $menu.eq(idx).addClass('on');

                  ★$menu.click에서 addClass, removeClass부분 제거해서 이 곳에 저장.

                }

            }

        });

    });

});