링크를 사용하여 페이지의 해당 부분으로 스크롤하세요.

웹사이트 페이지의 출현과 함께 긴 페이지를 탐색하는 방법으로 스크롤을 사용하는 것이 점점 인기를 얻고 있습니다. JS + jQuery 코드를 사용하면 탐색 요소의 링크를 쉽게 설정하여 페이지의 해당 부분으로 스크롤할 수 있습니다. 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 중국어 웹사이트를 팔로우하세요. HTML 동영상 튜토리얼 칼럼! ! !

위 내용은

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