リンクを使用してページの特定の部分にスクロールする方法

1 ページ Web サイトの出現により、長いページを移動する方法としてスクロールを使用することがますます一般的になってきました。この小さな部分は JS jQuery コードで実装されており、ページの対応する部分にスクロールするためのリンクを nav 要素に簡単に設定できます。 JS が存在しないときにアンカー タグをページに追加したい場合。

コーヒースクリプト:

$("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 中国語 Web サイトの他の関連記事を参照してください。