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
'웹 관련 기록 > Javascript' 카테고리의 다른 글
제이쿼리 1.8.0 선택자 테스트 (0) | 2014.04.02 |
---|---|
cycle.js, IE8 PNG 이미지 사용시 흰색 배경이 생기는 현상 (0) | 2014.03.11 |
제이쿼리를 이용한 브라우저 스크롤 끝 도달시 체크 (0) | 2014.02.18 |
@media, 미디어 쿼리 속성 중 orientation (0) | 2014.02.07 |
JavaScript 선언 시 language와 type 중 어떤 것을 사용하면 될까? (0) | 2012.02.08 |
댓글