画面のスクロールを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>例: 右側のフローティングボックス 1 をクリックすると、$($(this).attr("href")) は $("#class1") と等しくなります。次に、class1 の先頭の ID でオフセットを取得します。このオフセットはスクロール距離です。次に、スクロール時間とスクロール方法を設定します。
帮到你了么？喜欢就点赞吧！^_^
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
