a태그 페이지 내에 스크롤 천천히 스무스하게 움직이기 - jQuery

a태그 페이지 내에 스크롤시에 

천천히 스무스하게 움직이기 - jQuery 

위로 아래로 모두 적용

 

jQuery로 이 작업을 수행.

다음은 동일한 페이지의 앵커로 부드러운 페이지 스크롤을 수행하는 코드로

다른 링크를 대상으로 하지 않고 해당 점프 링크를 식별하기 위해 몇 가지 로직이 내장

a 태크에 ID고, 클래스(class)고, 아무것도 필요 없습니다
CSS 에 아무짓도 안해 도 됩니다

 

태그

<!-- 태그 버튼 --> <a href="#shop"><img src="00.jpg"></a> ... <!-- 이동위치 --> <a name="shop"></a>

스크립트

<!--스크립트--> <script> // Select all links with hashes $('a[href*="#"]')   // Remove links that don't actually link to anything   .not('[href="#"]')   .not('[href="#0"]')   .click(function(event) {     // On-page links     if (       location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')        &&        location.hostname == this.hostname     ) {       // Figure out element to scroll to       var target = $(this.hash);       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');       // Does a scroll target exist?       if (target.length) {         // Only prevent default if animation is actually gonna happen         event.preventDefault();         $('html, body').animate({           scrollTop: target.offset().top         }, 1000, function() {           // Callback after animation           // Must change focus!           var $target = $(target);           $target.focus();           if ($target.is(":focus")) { // Checking if the target was focused             return false;           } else {             $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable             $target.focus(); // Set focus again           };         });       }     }   }); </script>

클릭이 안되거나 적용이 안되는 경우 기존 스크립트랑 충돌 될 수 있는지 확인 바랍니다

 

저는 초보로 저장용으로 남겨둡니다.
잘못된 부분이나 더 좋은 부분은 댓글로 남겨주시면 수정 하겠습니다.

출처 : https://css-tricks.com/snippets/jquery/smooth-scrolling/