ホームページ >ウェブフロントエンド >htmlチュートリアル >フロントエンド画面のスクロール効果_html/css_WEB-ITnose
フロントエンド画面のスクロール効果_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 08:46:271703ブラウズ
画面のスクロールを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> 対応する 3499910bf9dac5ae3c52d5ede7383485 タグをクリックして、html タグと body タグに対して全体的なアニメーション処理を実行し、< を取得します。 ;a> 実行時 ;href タグの属性値。この値はアンカーポイントの ID でもあります。 例: 右側のフローティングボックス 1 をクリックすると、$($(this).attr("href")) は $("#class1") と等しくなります。次に、class1 の先頭の ID でオフセットを取得します。このオフセットはスクロール距離です。次に、スクロール時間とスクロール方法を設定します。
- 継続時間はスクロールの時間です
- イージングはスクロールの方法です。時間のある友達はこれをチェックしてください。とても楽しいです
帮到你了么？喜欢就点赞吧！^_^
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。