「↑ページTOPへ戻る」ボタンリンク、ページ内アンカーリンククリックでページ内をスムーズ移動する方法をご紹介します。
過去に紹介した「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へ戻る」ボタンリンク、ページ内アンカーリンククリックでページ内をスムーズ移動するデモページ
※流用される場合は自己責任でお願いします。
デモページ
ディスプレイ広告