定番ブログパーツである「トップへ戻るボタン」を実装します。コンポーネント内に入れ込むため、このコードをそのままどのサイトにも流用できます。「トップへ戻るボタン」とは「トップへ戻るボタン」とは、押すとページの一番上にスクロールするボタンです。最近は縦に長いページが多く、スクロールの手間を減らすために右下に置いているサイトがよく目につきます。スクロールしたらボタンを表示するようにするフックを使うと、スクロール量を検知することができます。これを利用して、少しスクロールしたらボタンを表示するようにします。使い方については、前回の記事を参照ください。ExtendNext.jsのnext-mdx-remoteで作られたMDXブログについて、インラインコードとコードブロックコピーボタンを実装します。fixed;を使います。よっては特別な書き方を求められる場合があります。同じ書き方でスクロールを実装できます。BackToTopButton;まとめ最終的には以下のようになりました。BackToTopButton;まとめ今回は定番ブログパーツである「トップへ戻るボタン」を実装しました。コンポーネント内に入れ込んでいるため、このコードをそのままどのサイトにも流用できます。QiitaReact(Next.js)でTopへ戻るボタンを実装する方法になります。ライブラリ等は使用しないので、導入もしやすいかと思います。https://qiita.com/TK-C/items/57f8e2283b46655b98f0関連記事Next.js【Next.js】next-mdx-remoteでインラインコードとコードブロックコピーボタンを実装するNext.jsのnext-mdx-remoteで作られたMDXブログについて、インラインコードとコードブロックコピーボタンを実装します。