ホームページ >ウェブフロントエンド >jsチュートリアル >js 「トップに戻る」ボタンと window.onscroll イベントの表示と非表示を切り替える application_javascript スキル
js 「トップに戻る」ボタンと window.onscroll イベントの表示と非表示を切り替える application_javascript スキル
- WBOYオリジナル
- 2016-05-16 17:42:471083ブラウズ
現在、ほとんどの Web サイトにこの機能が追加されています。スクロール バーがページの一番下までスクロールすると、ページの右下隅に「トップに戻る」ボタンまたはリンクが表示され、ボタンをクリックするとページがジャンプします。または コンテンツを表示するのに適した場所。
それでは、「トップに戻る」ボタンの表示/非表示を制御するにはどうすればよいでしょうか?実際には、window.onscroll イベントを実装するだけで済みます。コードは次のとおりです。
コードをコピーします。 コードは次のとおりです。次のように:
window.onscroll = function () {
if (document.documentElement.scrollTop document.body.scrollTop > 100) {
document.getElementById("scrollto" ).style.display = "ブロック" ;
}
else {
document.getElementById("scrollto").style.display = "none";
scrollto は「トップに戻る」のページコンテナ (div タグ)
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。