버튼 클릭 시 jQuery 애니메이션을 사용하여 특정 요소로 부드럽게 스크롤하는 방법은 무엇입니까?

버튼 클릭 시 특정 요소로 스크롤 애니메이션

페이지의 특정 위치, div 또는 대상으로 점프하거나 스크롤하려는 경우 버튼을 클릭하면 jQuery의 애니메이션 기능을 사용할 수 있습니다.

HTML 구조:

JavaScript에서 참조하기 위해 ID 또는 클래스가 있는 버튼 요소를 만듭니다. 또한 스크롤할 ID로 대상 요소를 설정합니다.

JavaScript:

<code class="javascript">$('#clickMe').click(function() {
    $('html, body').animate({
        scrollTop: $('#targetElement').offset().top
    }, 600);
});</code>

이 스크립트에서 #clickMe 버튼을 클릭하면, html 및 body 요소의 애니메이션을 트리거하여 #targetElement의 상단 오프셋으로 스크롤합니다. 600 매개변수는 애니메이션 지속 시간을 밀리초 단위로 설정합니다.

예:

다음 HTML 구조를 고려하세요.

<code class="html"><a id="clickMe" href="#">Go to Div</a>

<div id="targetElement">Target Div</div></code>

해당 JavaScript :

<code class="javascript">$('#clickMe').click(function() {
    $('html, body').animate({
        scrollTop: $('#targetElement').offset().top
    }, 600);
});</code>

'Go to Div' 버튼을 클릭하면 페이지가 'Target Div' 요소로 부드럽게 스크롤됩니다.

위 내용은 버튼 클릭 시 jQuery 애니메이션을 사용하여 특정 요소로 부드럽게 스크롤하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!