ホームページ > 記事 > ウェブフロントエンド > トップに戻る効果の JavaScript 実装の例
私たちの開発作業では、
JavaScriptを使用してトップに戻るコードを実装することがよくあると思います。今日は、この機能を説明します。 Back to Top 効果の JavaScript 実装例を詳しくご紹介します。 ネイティブ js を使用して、単純に先頭に戻る効果を実現します。要件は比較的明確です。 1. ボタンの表示と非表示。 2. 途中で再びオンスクロールのクリアをトリガーします
タイマー(まだ実装されていません。教えていただければ幸いです) コード:
<!-- Time:2016.8.4 author:Joel Dom操作 1.document.getElementById 根据ID获取标签元素 2.document.documentElement.scrollTop .ie滚动条数值 3.document.body.scrollTop .chrome 4.document.documentElement.clientHeight 可视区域高度 事件运用 1.window.onload 加载完毕触发事件 2.onclick 点击触发事件 3.window.scroll 滚动条触发事件 定时器 1.setInterval() 2.clearInterval() --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .btn:hover{ background: blue; } .btn{ display: none; height: 40px; width: 40px; background: red; position: fixed; left: 1410px; top: 600px; } .image{ width: 1190px; margin:0 auto; } </style> <script type="text/javascript"> window.onload = function(){ var myBtn = document.getElementsByClassName("btn"); var clientHeight = document.documentElement.clientHeight; var timer = null; window.onscroll = function(){ var osTop = document.documentElement.scrollTop || document.body.scrollTop; if(osTop > clientHeight){ myBtn[0].style.display = "block"; } else{ myBtn[0].style.display = "none"; } } myBtn[0].onclick = function(){ clearInterval(timer); timer = setInterval(function(){ var osTop = document.documentElement.scrollTop || document.body.scrollTop; var spd = Math.floor((-osTop) / 1000); document.documentElement.scrollTop = osTop + spd; document.body.scrollTop = osTop + spd; if(osTop == 0){ clearInterval(timer); } },30); } } </script> </head> <body> <a href="javascript:;" class="btn">按钮</a> <p class="image"> <img src="tb_bg.jpg" alt=""> </p> </body> </html>概要:
1. レンダリングdom flow の順に、hover は a より前に書かれた場合にのみ有効になり、それ以外の場合は上書きされます。
3.getElementsByClassName はノードリストを返すので、配列の形式を使用します。
4. 異なるブラウザーでの互換性の問題を解決するには、タブ キーの依存関係を放棄し、代わりに 2 つのスペースを使用します。
5. emmet プラグインのインストールと使用。
6. jq が提供するアニメーションを使用すると、トップに戻る効果をより簡単に実現できます。アンカー ポイント方法は、特定の状況で使用することもできます。問題は、一部の詳細がブラウザの入力フィールドに表示されることです。
関連する推奨事項:
JS スクロールイベント window.onscroll とposition: トップに戻るコンポーネントを書き込むように修正されました。 IE6 と互換性があります
javascript - iframe のコンテンツを iframe の外側の先頭に戻す方法
以上がトップに戻る効果の JavaScript 実装の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。