この記事にはプロモーションが含まれています。

【超簡単】Javascript無しで「スムーススクロール」のトップへ戻るボタンを実装

2025-01-042025-01-06

この記事では

Javascriptを使用せずに
「スムーススクロール」のトップへ戻るボタンを実装する方法

について解説します。

スムーススクロールのトップへ戻るボタンは、もちとんJavascriptを使用することで実装できます。

しかし、この記事の方法を用いればJavascriptのファイルやソースコードの作成コストが減るだけでなく、とても簡単に「スムーススクロール」のトップへ戻るボタンを実装することが可能です。

ケケンタ

本当にめちゃくちゃ簡単なので、ぜひご活用ください！

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

¥3,000 (2025/01/08 18:03:28時点 Amazon調べ-詳細)

【動作確認】スムーススクロールのトップへ戻るボタン

まずは実際の動作をご確認いただけるように、codepenで用意したデモをお見せします。

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

ケケンタ

ご覧いただいたように、Javascriptを使用しなくても、「スムーススクロール」のトップへ戻るボタンは簡単に実装することが可能です！

【解説】ソースコード

以下が「スムーススクロール」のトップへ戻るボタンを実装したソースコードです。

<!-- ページのトップ -->
<div id="top"></div>

<!-- 長いコンテンツ -->
<div style="height: 100vh; background-color: #00c3ff;"></div>

<a href="#top" class="scroll-to-top">トップへ戻る</a>

html {
  scroll-behavior: smooth; /* スムーススクロールを有効にする */
}

/*** 以下は見た目や動作確認用のCSS ***/

body {
    height: 150vh; /* 長いページを生成 */
    margin: 0;
    padding: 0;
}
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
}
.scroll-to-top:active {
    background-color: #0056b3;
}

ポイントは、CSSでhtml自体にscroll-behavior: smooth;を指定している点です。

こうすることで、アンカータグによる画面内の移動がスムーススクロールになります。

ケケンタ

通常どおりにアンカータグを設定し、html自体にscroll-behavior: smooth;を指定するだけでいいのでとっても簡単です！