버튼 클릭을 통해 jQuery를 사용하여 웹 페이지의 특정 섹션이나 대상으로 부드럽게 스크롤하려면 어떻게 해야 합니까?

jQuery: 버튼 클릭을 사용하여 특정 위치나 대상으로 이동

웹 페이지를 탐색할 때 빠르게 이동하는 것이 바람직한 경우가 많습니다. 특정 섹션이나 대상. jQuery를 사용하면 이 작업이 간단해집니다.

이를 달성하려면 click() 이벤트 핸들러를 활용하여 버튼 클릭을 수신할 수 있습니다. 이벤트 핸들러 내에서 jQuery의 animate() 메서드를 사용하여 원하는 대상으로 부드럽게 스크롤합니다. 자세한 분석은 다음과 같습니다.

HTML 마크업:

<code class="html"><button id="clickMe">Jump to Section</button>

<!-- Targets for scrolling -->
<div id="target1">Section 1</div>
<div id="target2">Section 2</div></code>

JavaScript 코드:

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

이 코드에는 :

• $('#clickMe')를 사용하여 버튼을 선택합니다.
• 버튼을 클릭하면 animate()를 사용하여 스크롤 애니메이션을 시작합니다.
• 대상 요소는 해당 ID(#target1)로 식별됩니다.
• offset() .top 속성은 페이지 상단에서 대상 요소의 수직 오프셋을 반환합니다.
• 600 매개변수는 다음을 지정합니다. 밀리초 단위의 애니메이션 기간(선택 사항).

이 코드를 활용하면 버튼을 클릭하면 "target1" div까지 원활하게 스크롤됩니다. 필요에 따라 대상 ID를 수정하여 페이지의 다른 섹션이나 대상으로 이동할 수 있습니다.

위 내용은 버튼 클릭을 통해 jQuery를 사용하여 웹 페이지의 특정 섹션이나 대상으로 부드럽게 스크롤하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!