トップに戻る 概要

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

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

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

1. アンカー タグ

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

方法:

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

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

欠点:

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

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

e787beffa3fdcb6753e17caffaa6568bトップに戻る5db79b134e9f6b82c0b36e0489ee08ed

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

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

html:<a href="" title="回到顶部" id="toTop">
    <span id="arrow"></span></a>