トップに戻るボタン

トップに戻るボタン: 用途

長いページでは、トップに戻るボタンがあると、特にスマートフォンで、全部を戻ってスクロールする手間が省けます。

表示する側、色、サイズ、形、端からの距離、どれだけスクロールしたら表示するかを選べます。コードは、ラベル付きの本物のボタンを使い、短いトランジションで表示され、動きを減らす設定をしていない人にだけスムーズにスクロールし、見えないボタンにフォーカスが当たらないようにし、ページの先頭へフォーカスを移します。

使い方

1. 側、色、サイズを選びます。
2. 距離と表示のタイミングを決めます。
3. コードをコピーして、bodyの終わりの前に貼り付けます。

使うタイミング

• ブログや長い記事。
• 商品リストの多いお店。
• メニューやカタログ。

よくある質問

ボタンはいつ表示されますか？

ユーザーが、あなたが選んだ高さ（初期値は1画面分）より下までスクロールしたときです。短いページでは表示されないので、コンテンツの上に不要なボタンが出ることはありません。

WhatsAppのボタンと干渉しませんか？

同じ隅になることがあります。トップに戻るボタンを反対側に置くか、下端からの距離を広げて、スマートフォンで互いに重ならないようにしてください。

フォーカスがページの先頭に移るのはなぜですか？

キーボードやスクリーンリーダーで操作している人は、ボタンを押したあと、ページの先頭から操作を続ける必要があります。コードは、画面をスクロールするだけでなく、最初の要素にフォーカスを移します。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール