フロントエンド画面のスクロール効果_html/css_WEB-ITnose-htmlチュートリアル-php.cn

フロントエンド画面のスクロール効果_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:46:27

オリジナル

1723 人が閲覧しました

画面のスクロールを2種類に分けます。

特定の位置から上に直接スクロールする
指定した位置までボタンをクリックする、これ アンカーポイント

については、私の記事 「アンカーポイントを設定する 3 つの方法」 で紹介しています。理解できない人は見てください。

最初の方法は最も簡単です。 アンカー ID を使用して を配置するだけで、直接実行できます。ここではあまり詳しく説明しません。最初のコードを主に紹介します。

誰もがより明確に理解できるように、最初に 2 つ目のコードを紹介します。 🎜>

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>滚动</title>        <style type="text/css">            .classCont div {                height: 400px;                width: 200px;                border: 1px solid #000000;            }            .hrefCont{                position: fixed;                top: 50%;                left: 230px;            }            .hrefCont a{                display: block;                width: 20px;                height: 20px;                margin-bottom: 2px;                text-align: center;                line-height: 20px;                border: 1px groove #000000;                cursor: pointer;                text-decoration: none;            }        </style>    </head>    <body>        <div class="classCont">            <div id="class1">1</div>            <div id="class2">2</div>            <div id="class3">3</div>            <div id="class4">4</div>            <div id="class5">5</div>        </div>        <div class="hrefCont">            <a href="#class1">1</a>            <a href="#class2">2</a>            <a href="#class3">3</a>            <a href="#class4">4</a>            <a href="#class5">5</a>        </div>    </body></html>

ログイン後にコピー

実行結果インターフェース

実行すると、アニメーションがないと非常に硬く、まったくフレンドリーではないことがわかります。次に、家電アニメーションに来て、元のベースに js コードを追加します。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>    <script type="text/javascript">        $(document).ready(function() {            $("a").click(function() {                $("html, body").animate({                    scrollTop: $($(this).attr("href")).offset().top + "px"                }, {                    duration: 500,                    easing: "swing"                });                return false;            });        });    </script>

ログイン後にコピー

対応するタグをクリックして、html タグと body タグに対して全体的なアニメーション処理を実行し、< を取得します。 ;a> 実行時 ;href タグの属性値。この値はアンカーポイントの ID でもあります。

例: 右側のフローティングボックス 1 をクリックすると、$($(this).attr("href")) は $("#class1") と等しくなります。次に、class1 の先頭の ID でオフセットを取得します。このオフセットはスクロール距離です。次に、スクロール時間とスクロール方法を設定します。

あなた。上記のコードは理解できます。マスター、冗長であることを嫌いにならないでください。具体的な効果を体験するには、まだ自分で練習する必要があります。もっと良い方法がある場合は、声を上げてください。

帮到你了么？喜欢就点赞吧！^_^

ログイン後にコピー