본문 바로가기

발견 discovery

한 페이지의 링크 사이를 부드럽게 이동, Smooth Scroll

// 페이지 내 링크 사이를 부드럽게 이동할 수 있도록 시간을 설정한다.
$(document).ready(function() {
    $('a[href*=#]:not([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) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000); // 시간 설정
                return false;
            }
        }
    });
});



row12 - 1000은 한 페이지 링크 사이의 이동 시간이며 단위는 1/000초이고,

위 소스에서 설정하는 이동 시간은 1000이므로 1초이다.


한 페이지의 링크 사이는 가깝든 멀든 설정한 이동 시간 그대로 이동하기 때문에,

링크 사이가 가까울수록 천천히, 멀 수록 빠르게 이동한다.


[붙임] Smooth Scroll 적용 예는 SimilarWeb - 웹사이트, 모바일 애플리케이션 인사이트 제공 서비스에서 볼 수 있다.











손정보 손링크 손어플 - 새로운 블로그, 오늘은












최근삼개월 오늘은인기Twenty - 베스트


최근영개월 오늘은추천Twenty - 추천추천


최근영개월 오늘은주요Forty - 다좋아하지만 그중에서좀더좋아하는











오늘은 블로그를 방문해 주셔서 감사합니다.

오늘은 블로그 (http://www.s740abcdefg.com/)는, PC에서 더 많은 기능과 정보를 제공합니다. 감사합니다.