// 페이지 내 링크 사이를 부드럽게 이동할 수 있도록 시간을 설정한다. $(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 - 웹사이트, 모바일 애플리케이션 인사이트 제공 서비스에서 볼 수 있다.
최근영개월 오늘은주요Forty - 다좋아하지만 그중에서좀더좋아하는
오늘은 블로그를 방문해 주셔서 감사합니다.
오늘은 블로그 (http://www.s740abcdefg.com/)는, PC에서 더 많은 기능과 정보를 제공합니다. 감사합니다.
'발견 discovery' 카테고리의 다른 글
안드로이드 앱 이용 시, 나의 관심을 기반으로 광고가 노출되는 게 싫다면 (0) | 2016.03.03 |
---|---|
Position (HTML, CSS, JAVASCRIPT) (0) | 2016.03.03 |
가이우스 율리우스 카이사르 (0) | 2016.03.03 |
자연계에 존재하는 기본 4가지 힘 (0) | 2016.03.01 |
화면 상단에 부드럽게 고정 (0) | 2016.02.26 |
제이쿼리 사용하는 방법 (0) | 2016.02.26 |
Font (HTML, CSS, JAVASCRIPT) (0) | 2016.02.24 |
Google Translate (0) | 2016.02.24 |
Float (HTML, CSS, JAVASCRIPT) (0) | 2016.02.19 |
생의 마지막 순간에 남기는 말, 죽을 때 가장 후회하는 5가지 (0) | 2016.02.19 |