スムーススクロールについて

2026年02月18日 23:55
カテゴリ: ホームページ制作系

INDEX - 目次 -

最近はスムーススクロールを使っていないサイトをあまり見かけないですよね。

上や
下に
ぬるぬるっと動いて移動するやつです。

↓こういうボタンを押したりして、ビュン！と動くやつね。

動画も載せますね。

やり方を調べたら…

昔ながらというか、何行もあるjavascriptをコピペして…

って情報がたくさん出てくると思います。

コピペでやってみても
うまくいったり
いかなかったり…

「何で効かないの？」
って時間取られたり。

簡単なやり方

これだけでとりあえず動きます。

CSSに、

html {
scroll-behavior: smooth;
}

htmlに、「scroll-behavior: smooth;」って書くだけで、

<a href="#"

という感じのアンカーリンク（ページ内リンク）は
ビューンと動いてくれるようになります。

注意点

ただ、これだけだとurlが
https://en-graphiction.com/#anchor-link
みたいになります。

例えば上に戻るやつはURLをスッキリしたい場合、

上に戻る時に押すボタンやアンカーリンクは下記のように

<a href="javascript:void(0)" onclick="scrollToTop()">ページ上部へ戻る</a>

そしてjavascriptを少々

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' //念のため
  });
  history.pushState('', document.title, window.location.pathname + window.location.search);
}

これで、スッキリとしたURLでぬるぬるっと動かせるようになりますよ。

この記事が少しでも役立ったらハートを押してね！

執筆者

大岩智将

大岩 智将 OHIWA Tomoyuki

兵庫県加古川市を拠点に活動するWebディレクター / デザイナー。「縁グラフィクション」代表。 お客様との「縁」を大切に、心に響くクリエイティブを提案しています。 日々の制作の裏側や、役立つTipsをブログで発信中。→詳しい紹介

【レンタルサーバーご検討中の方へ】
このブログはエックスサーバーを使用しています。
さくらインターネットも使いやすいですよ。

同じカテゴリの記事