コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > トップに戻る 概要

トップに戻る 概要

高洛峰
リリース： 2016-10-08 14:28:46
オリジナル
1539 人が閲覧しました

Web サイトのトップに戻る機能は、ユーザー エクスペリエンスを向上させるのに役立ちます。ページが非常に長い場合、トップに戻ることが不可欠です。

トップボタンに戻ると、写真、背景画像、ベクターフォントアイコンを使用したり、コードCSSを使用して生成したりできます。ここでは css で生成されたメソッドを使用します。

トップに戻るさまざまな方法を以下にまとめます。

1. アンカー タグ

# には、デフォルトのアンカーは #top であり、Web ページのトップです。

方法:

1. トップに戻るボタンにアンカー タグ、つまりタグを使用します。トップに戻る

2. 位置決めターゲットをページの上部に配置します。 ここの name 属性と id 属性の値は、最初のステップの href 属性の値から # を 1 つ減らし、名前と ID を選択するだけです。

欠点:

アドレスバーに余分な # 記号が表示されます。

2. JavaScript スクロール イベント:

トップに戻る

scroll(0, 0) いいえ1 つのパラメータは画面に対する水平位置、2 番目のパラメータは画面に対する垂直位置です。これらの値はいずれも調整できます。

3. アニメートがゆっくりとトップに戻ります: 

html:<a href="" title="回到顶部" id="toTop">
    <span id="arrow"></span></a>
ログイン後にコピー


関連ラベル：
回到顶部总结
ソース：php.cn
前の記事：JavaScript - ajax 部分更新 (フロントエンドを初めて使用する、ここ 2 日間で Ajax を使用するのが初めて、まだよく理解できていません。アドバイスをお願いします) 次の記事：JavaScriptリソース事典中国語版（すごい最新版）
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ウィンドウ内のコンテンツがオーバーフローするとスクロールできなくなり、新しいコンテンツが非表示になります 私は現在ルーレット システム プログラムを構築しており (これは賭けをするというよりも賭けを阻止するためです!)、基本的なフレームワークを実行しているだけですが、すでにメイン ウィ...
から 2024-04-03 21:24:55
0
1
285
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート