링크를 사용하여 페이지의 특정 부분으로 스크롤하는 방법

한 페이지 웹사이트의 출현으로 긴 페이지를 탐색하는 방법으로 스크롤링을 사용하는 것이 점점 인기를 얻고 있습니다. 이 작은 부분은 JS + jQuery 코드로 구현되며 nav 요소에 링크를 쉽게 설정하여 페이지의 해당 부분으로 스크롤할 수 있습니다. JS가 없을 때 앵커 태그를 페이지에 추가하려는 경우.

Coffeescript:

$("nav").find("a").click (e) ->
    e.preventDefault()
    section = $(this).attr "href"
    $("html, body").animate
        scrollTop: $(section).offset().top

또는 JS:

$("nav").find("a").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top    });});

및 일부 샘플 HTML

<nav>
    <a href="#welcome">Welcome</a>
    <a href="#about">About</a>
    <a href="#section3">Section 3</a>
</nav>
<div id="welcome">Welcome to this website</div>
<div id="about">About this website, and such</div>
<div id="section3">The third section</div>

위 내용은

링크를 사용하여 페이지의 특정 부분으로 스크롤하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!