JavaScript, jQuery : 내부 링크로 부드럽게 스크롤 이동하기 : 방법, 예제, 구현

JavaScript, jQuery : 내부 링크로 부드럽게 스크롤 이동하기 : 방법, 예제, 구현

 

jQuery를 사용하면 코드를 거의 사용하지 않고도 웹 사이트와 상호 작용하는 방식을 변경할 수 있습니다. jQuery에는 스크롤 기능을 포함하여 jQuery가 하는 모든 것을 애니메이션 할 수 있는 함수가 있습니다. 애니메이션 스크롤은 페이지의 특정 위치로 작업하는 것보다 방문자에게 더 나은 효과를 줍니다.

내부 링크를 사용하여 페이지의 다른 부분으로 이동하는 많은 웹 사이트가 있습니다. 이는 앵커 태그의 #과 엘리먼트 ID를 사용하여 수행됩니다.

<a href="#services">Jump to services</a>

<div id="services">

</div>

 

 

 

위의 작업을 수행하면 페이지를 클릭 할 때 서비스 div로 페이지를 이동시키는 링크가 작성됩니다. 그러나이 위치로 이동하고 페이지 아래로 떨어지면 방문자에게 가장 좋은 방식은 아닙니다.

방문자가 이 위치를 볼 수 있도록 실제로 이 위치로 스크롤 할 수 있으면 더 좋습니다. jQuery에서 scroll 이벤트에 애니메이션을 설정하면 브라우저에 스크롤 효과가 생성됩니다.

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

 

 

 

jQuery 파일의 $ (document) .ready 함수에 위의 내용을 추가하면 #으로 시작하는 모든 링크에는 대상에 대한 애니메이션 스크롤이 있습니다. 

위 코드에서 클릭 이벤트에서 URL이 변경되어 URL 끝에 앵커가 표시되는 것을 볼 수 있습니다. click 이벤트의 URL에서 이것을 제거하려면 애니메이션 함수에서 마지막 콜백 함수를 제거하면됩니다.

$('html, body').stop().animate({
     'scrollTop': $target.offset().top
}, 900, 'swing');