ホームページ >ウェブフロントエンド >CSSチュートリアル >

不言
不言オリジナル
2019-04-13 17:32:141762ブラウズ

Web サイトのページの出現により、長いページを移動する方法としてスクロールを使用することがますます一般的になってきました。 JS jQuery コードを使用すると、nav 要素にリンクを簡単に設定して、ページの対応する部分にスクロールできます。 JSが存在しない場合にうまく縮退させたい場合はページにアンカータグを追加してください この記事ではc787b9a589a3ece771e842a6176cf8e9リンクを使ってページの該当箇所までスクロールする方法を紹介します。

<nav> リンクを使用して、ページの適切な部分までスクロールします。

次は、特定のコード

コーヒースクリプト:

$("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 サイトの HTML ビデオ チュートリアル 列に注目してください。 ! !

以上が

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。