[jQuery] Smooth Scroll 부드러운 스크롤 이동

부드러운 스크롤 이동 Smooth Scrolling

jQuery 사용중에 대략적으로 메뉴를 클릭하면 하단으로 내려가는 스크롤 작업이 필요한 경우가 있다.

특히나 원페이지에서는 더욱이 그렇다.

그래서 jQuery 로 Smooth scroll 을 알아보도록 하자.

$(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; } } }); });

당연히 jQuery 는 그전에 선언되어 있어야 하고,

그 이후에 위 코드를 입력하고 a태그의 href 속성에서 #ID 를 입력하게 되면 해당 아이디 값의 위치로 부드럽게 이동할 것이다.