コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > js 「トップに戻る」ボタンと window.onscroll イベントの表示と非表示を切り替える application_javascript スキル

js 「トップに戻る」ボタンと window.onscroll イベントの表示と非表示を切り替える application_javascript スキル

WBOY
リリース： 2016-05-16 17:42:47
オリジナル
1074 人が閲覧しました

現在、ほとんどの 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 タグ)
関連ラベル：
js显示隐藏 回到顶部按钮 onscroll
ソース：php.cn
前の記事：ページ要素を別のページ要素に追加する appendchild の問題_javascript スキル 次の記事：JavaScript変換旧暦クラス実装とmethod_javascriptスキルの呼び出し
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
非表示のサイドパネルを表示: チェックが入っています アニメーション化されたハンバーガー メニューを介してビューに切り替える機能を備えたナビゲーション メニューをサイド パネルに追加したいと考えています。 JSを使わずにCSSだけで作...
から 2024-04-06 15:49:33
0
1
319
クリックしてスクロールすると div を非表示/表示します 検索アイコンをクリックすると表示され、ユーザーがクリックまたはスクロールすると非表示になる、非表示の検索フォームを作成したいと考えています。
から 2024-04-06 12:20:46
0
1
386
特定のメニュー項目にマウスオーバーしても、非表示のサブメニューが表示されない メニュー項目を呼び出すことができるように、メニュー項目用にいくつかのクラスを作成しました。 .dropdownBox{display:none;}.dropdownli:hover...
から 2024-04-04 14:39:08
0
1
359
フォーカスが機能しないときに非表示を表示からブロックを表示に変更する 「searchbarinput」をクリックしたときに「searchbardropdown」を表示させようとしていますが、うまくいきません。何が起こっているのか知っている人はいますか...
から 2024-04-04 14:24:47
0
1
371
Postman で JavaScript を使用して送信済みメッセージにアクセスできない 以下のコードを使用すると、post メソッドで MySQL テーブルに情報を入力でき、その情報がテーブルに記録されます。 jsターミナルでも確認してみます。 「nodeapi.js...
から 2024-04-03 22:02:38
0
1
304
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート