このドキュメントは、Framerを学ぶ日本のユーザーのために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加したものです。Framerを使う皆さんに少しでも役に立てば幸いです。

scroll-to-topボタンの役割

ユーザーが長いページを閲覧しているとき、再びページの先頭に戻る必要がある場合が多いです。このような場合、一々スクロールを戻す代わりに、『scroll-to-top（スクロールしてトップに戻る）』ボタンを提供すると、ウェブサイトでの体験を向上させることができます。

1. ボタンを追加する

まず、アイコンやボタンのレイヤーを望む位置に配置します。（この例では、画面下部右側に固定されたボタンを使用しました）

• ボタンを選択した後、Position設定でFixedを選択します

• 同様に、Position設定で固定したい位置を選択します
  （この例では、BottomとRightの値を指定して、画面の右下に固定しました）

2. スクロールセクションを作成する

次に、ボタンが移動するターゲット地点を設定します。

• ナビゲーションバー（ページ上部の領域）を選択します

• 右側のパネルでScroll Sectionの横にある+アイコンをクリックし、セクションの名前を指定します
  （この例では、セクションの名前を#nevに指定しました）

3. ボタンを接続する

次に、ボタンがスクロールセクションと接続されるように設定します。

• 該当のボタンを選択します

• 右側のパネルでLinkの横にある+アイコンをクリックします

• ページと先に作成したセクションを選択すると、接続が完了します。

まとめ

具体的な例として、このプロジェクトをRemixして練習してみることをお勧めします。

問題が発生した場合、追加のサポートを受けるためには、Framerサポートページを通じてお問い合わせください。

この記事はFramer公式ブログの‘How to add a scroll-to-top button to your website’を翻訳し、編集したコンテンツです。