JavaScript

「ページTOPへ戻る」ボタン（アンカーリンク）クリックでページ内をスムーズ移動する方法

  /

Webページを閲覧していると、長いページをスクロールした後に**「ページTOPへ戻る」ボタン**があると便利ですよね。また、ページ内の特定のエリアにスムーズに移動できるアンカーリンクも、ユーザーの利便性を向上させる重要な機能です。

しかし、通常のアンカーリンクでは、クリックすると一瞬でジャンプしてしまい、不自然な動きになってしまいます。そこで今回は、スムーズなスクロール効果を実装する方法をご紹介します。jQueryと簡単なJavaScriptを使うだけで、快適なページ内移動を実現できるので、ぜひ試してみてください！

過去に紹介した「jquery.page-scroller.jsでのページ内アンカーのスムーズスクロール実装ガイド」と似たような内容です。

Contents

「ページTOPへ戻る」ボタン（アンカーリンク）クリックでページ内をスムーズ移動するCSSの記述

※ページ内アンカー移動先エリアのCSSの記述です。アンカー移動先のエリアは4箇所（#a1～#a4）、ページ最下部に「↑ページTOPへ戻る」ボタンを用意しました。必要に応じて変更して下さい。

<style type="text/css">
<!--
body{
  text-align: center;
  font-size: 24px;
  color: #ffffff;
  font-weight: bold;
}
h1{
  text-align: center;
  padding: 10px 0 0 0;
  font-size: 24px;
  font-weight: bold;
  color: #000000;
}
p{
  color: #000000;
  font-size: 18px;
}
#a1{
  height: 500px; width: 100%; background-color: #cccccc;
}
#a2{
  height: 1000px; width: 100%; background-color: #333333;
}
#a3{
  height: 2000px; width: 100%; background-color: #424251;
}
#a4{
  height: 800px; width: 100%; background-color: #000000;
}
.topback{
  width: 100%;
  height: 60px;
  text-align: center;
  background-color: #FFFF73;
  margin: 0 auto;
}
.topback a{
  line-height: 60px;
  display: block;
}
-->
</style>

「ページTOPへ戻る」ボタン（アンカーリンク）クリックでページ内をスムーズ移動するJavaScriptの記述

※jquery.min.js、jquery.easing.min.jsファイルを読み込みます。ページ内のaタグを取得し、aタグから移動先コンテンツのブラウザからの高さ分スムーズにページ内移動するようにしてます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.easing.min.js"></script>
<script type="text/javascript">
$(function(){
// ページ内の全href="#"、aタグ取得
const smoothScrollTrigger = document.querySelectorAll('a[href^="#"]');
// 取得したaタグにクリックイベントを設定
for (let i = 0; i < smoothScrollTrigger.length; i++) {
    smoothScrollTrigger[i].addEventListener('click', (e) => {
        
        // ページ内アンカーターゲット位置取得
        e.preventDefault();
        let href = smoothScrollTrigger[i].getAttribute('href'); // aタグのリンク先取得
        let targetElement = document.getElementById(href.replace('#', '')); // リンク先のタグコンテンツ取得
        
        const rect = targetElement.getBoundingClientRect().top; // ブラウザからの高さ取得
        const offset = window.pageYOffset; // 現在のスクロール量を取得
        const gap = 10; // 固定ヘッダー分の調整位置（ココで指定したサイズpx分余白を付けて移動）
        const target = rect + offset - gap; //最終的な位置を割り出す

        // アンカー位置にスクロール移動
        window.scrollTo({
            top: target,
            behavior: 'smooth',
        });

    });
}
});
</script>

「ページTOPへ戻る」ボタン（アンカーリンク）クリックでページ内をスムーズ移動するHTMLの記述

※アンカー移動先のエリアを4箇所（#a1～#a4）、ページ最下部に「↑ページTOPへ戻る」ボタンを用意しました。必要に応じて変更して下さい。

<h1 id="a0">ページ最下部にある「↑ページTOPへ戻る」ボタン、ページ内アンカーリンククリックでページ内をスムーズ移動します。</h1>
<p>以下の「a1～a4エリアに移動↓」リンクをクリックすると各エリアにページ内アンカー移動します。</p>
<div style="padding-bottom: 20px;"><a href="#a1">a1エリアに移動↓</a>　<a href="#a2">a2エリアに移動↓</a>　<a href="#a3">a3エリアに移動↓</a>　<a href="#a4">a4エリアに移動↓</a>　</div>

<div id="a1">a1エリア</div>
<div id="a2">a2エリア</div>
<div id="a3">a3エリア</div>
<div id="a4">a4エリア</div>
<div class="topback"><a href="#a0">↑ページTOPへ戻る</a></div>

「↑ページTOPへ戻る」ボタンリンク、ページ内アンカーリンククリックでページ内をスムーズ移動するデモページ

「↑ページTOPへ戻る」ボタンリンク、ページ内アンカーリンククリックでページ内をスムーズ移動するデモページ

まとめ

今回紹介した方法を使えば、「ページTOPへ戻る」ボタンやページ内アンカーリンクを、スムーズなスクロールアニメーション付きで実装できます。これにより、ユーザーの操作性が向上し、より快適なWebサイトを作ることができます。

特に、スマートフォンユーザーにとっては、長いページをスクロールする手間を減らすことができるので、導入することでユーザビリティが向上します。jQueryを使えば簡単に実装できるので、ぜひ自分のサイトに取り入れてみてください！

　
※流用される場合は自己責任でお願いします。
　デモページ head タグ内のGoogleアナリティクスタグは流用しないで下さい。

ページ内アンカー ページTOPへ戻る
関連記事