トップに戻る 概要

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>