この記事では

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

について解説します。

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

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

ケケンタ

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

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

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

まずは実際の動作をご確認いただけるように、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;を指定するだけでいいのでとっても簡単です！

【注意点】スムーススクロールが上手く機能しない場合

スムーススクロールが上手く機能しない場合、いくつかの原因が考えられます。

1. ブラウザの互換性

scroll-behavior: smooth;がサポートされていないブラウザを使用している可能性があります。

scroll-behavior: smooth;は最新のブラウザでサポートされていますが、古いブラウザでは動作しないことがあります。

互換性の問題をチェックするには、Can I Useをご参照ください。

2. 正しいセレクタに適用されていない

scroll-behavior: smooth;が正しいセレクタに適用されていない可能性があります。

通常はhtmlまたはbodyに適用しますが、特定のスクロールコンテナに適用したい場合は、そのコンテナに適用する必要がある点にご注意ください。

3. CSSの競合

他のCSSがscroll-behaviorプロパティと競合している可能性があります。

例えば、特定のフレームワークやリセットCSSが影響している場合があります。

4. HTML構造の問題

アンカーリンクが正しく設定されていない場合、スムーススクロールが機能しないことがあります。

例えば、ターゲット要素が存在しない、IDが正しく設定されていないなどです。

ケケンタ

基本的にはhtml要素にscroll-behavior: smooth;を付与するだけでスムーススクロールになるばずですが、もしも上手く行かない場合は様々な原因が考えられので、これらの内容を参考に、ソースコードをご確認いただければと思います。

まとめ

以上がJavascriptを使用せずに「スムーススクロール」のトップへ戻るボタンを作成する方法でした。

いかがだったでしょうか。

通常のアンカータグの設定に加えて、htmlにscroll-behavior: smooth;を付与するだけで簡単に実装することができました。

ケケンタ

実装コストが削減できるだけでなく、Javascriptの管理コストも減らすことができるためぜひご活用いただければ幸いです！

それでは、最後までご覧いただきありがとうございました！

当ブログではWeb制作やPHPなどWebアプリに関する情報を発信しています。

ご興味のある方はほかの記事もご覧いただけるとうれしいです。

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

• 学習の方向性に迷いがある方
• 効率的にスキルを身につけたい方
• 転職や副業でWeb制作を活用したい方
• 挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

あわせて読みたい

忍者CODEでWeb制作を学ぶべき理由【業界最安値で挫折しない学習環境】 Web制作を学びたいけど、プログラミングスクールは高すぎるし、独学だと挫折しそうで不安…… このような悩みをお持ちの方に向けて、この記事では 業界最安値でWeb制作を...