본문 바로가기
웹 관련 기록/Javascript

제이쿼리 1.8.0 부드러운 스크롤링

by Planetis 2014. 2. 17.
1
2
3
4
5
6
7
8
9
10
11
$('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
        var $target = $(this.hash);
        $target = $target.length && $target || $('[name=' + this.hash.slice(1+']');
        if ($target.length) {
            var targetOffset = $target.offset().top;
            $('html,body').animate({scrollTop: targetOffset}, 700);
            return false;
        }
    }
});
cs


제이쿼리의 선택자를 이용하여서 href 속성 중 #이 들어간 속성을 찾고,

해당 A태그가 클릭되었을 경우, 현재 페이지의 주소를 체크하여, 

클릭된 A의 href 주소와 비교 후, #을 이용한 이동인지 페이지 이동인지 확인하고,

그 후 이동해야할 타켓의 높이 값을 가져와서 스크롤을 제이쿼리 애니메이션으로 이동 시킵니다.

마지막으로 #에 대한 다른 동작은 false 로 리턴하여 엉뚱한 곳으로 스크롤 되는 것을 막습니다.

 

이동 속도는 줄:7, 700의 값을 임의로 조정하시면 됩니다. (1 = 1000/1초 입니다.)

 

 코드 자체가 자주 사용되지 않으나 간혹 요구하시는 클라이언트 분들이 있어서 참으로 기록

320x100

댓글