jQueryを使うとするするとスクロールして移動させることができます。
視覚的にもとても良いのでおすすめです。
また、グローバルメニューの固定などの影響で移動先が隠れてしまった（ズレた）時には簡単に調整することができます。
するする動くと楽しいですねー
でも、ズレてると、ん、ってなるので調整しましょうー
JavaScript
※ 『adjust』で簡単に調整することができます。
▽jQuery（必須）
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
▽簡単な説明を記載しています。
$(function(){
// #で始まるa要素をクリックした場合に処理（"#"←ダブルクォーテンションで囲むのを忘れずに。忘れるとjQueryのバージョンによっては動かない。。）
$('a[href^="#"]').click(function(){
// 移動先を0px調整する。0を30にすると30px下にずらすことができる。
var adjust = 0;
// スクロールの速度（ミリ秒）
var speed = 400;
// アンカーの値取得 リンク先（href）を取得して、hrefという変数に代入
var href= $(this).attr("href");
// 移動先を取得 リンク先(href）のidがある要素を探して、targetに代入
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を調整 idの要素の位置をoffset()で取得して、positionに代入
var position = target.offset().top + adjust;
// スムーススクロール linear（等速） or swing（変速）
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
▽jQueryには以下の記述でオッケーです。
$(function(){
$('a[href^="#"]').click(function(){
var adjust = 0;
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top + adjust;
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
jQueryのページ内リンクのスクロール（通常）
See the Pen jQueryのページ内リンクのスクロール（通常） by 125naroom (@125naroom) on CodePen.
HTMLとjQueryはこちら
HTML
<div class="section s_01">
<ul>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
<li><a href="#6">6</a></li>
</ul>
<div class="oneArea" id="1">
<div class="one_title">1</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="2">
<div class="one_title">2</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="3">
<div class="one_title">3</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="4">
<div class="one_title">4</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="5">
<div class="one_title">5</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="6">
<div class="one_title">6</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
</div>
jQuery
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('.s_01 a[href^="#"]').click(function(){
// 移動先を0px調整する。0を30にすると30px下にずらすことができる。
var adjust = 0;
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を調整
var position = target.offset().top + adjust;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
jQueryのページ内リンクのスクロール（位置を50px上にずらす）
See the Pen jQueryのページ内リンクのスクロール（位置を50px上にずらす） by 125naroom (@125naroom) on CodePen.
HTMLとjQueryはこちら
HTML
<div class="section s_02">
<ul>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
<li><a href="#6">6</a></li>
</ul>
<div class="oneArea" id="1">
<div class="one_title">1</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="2">
<div class="one_title">2</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="3">
<div class="one_title">3</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="4">
<div class="one_title">4</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="5">
<div class="one_title">5</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="6">
<div class="one_title">6</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
</div>
jQuery
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('.s_02 a[href^="#"]').click(function(){
// 移動先を50px上にずらす
var adjust = 50;
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を調整
var position = target.offset().top - adjust;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
jQueryのページ内リンクのスクロール（位置を50px下にずらす）
See the Pen jQueryのページ内リンクのスクロール（位置を50px下にずらす） by 125naroom (@125naroom) on CodePen.
HTMLとjQueryはこちら
HTML
<div class="section s_03">
<ul>
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li><a href="#3">3</a></li>
<li><a href="#4">4</a></li>
<li><a href="#5">5</a></li>
<li><a href="#6">6</a></li>
</ul>
<div class="oneArea" id="1">
<div class="one_title">1</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="2">
<div class="one_title">2</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="3">
<div class="one_title">3</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="4">
<div class="one_title">4</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="5">
<div class="one_title">5</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
<div class="oneArea" id="6">
<div class="one_title">6</div>
<a class="button" href="#s_01">▲ メニューに戻る</a>
</div>
</div>
jQuery
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('.s_03 a[href^="#"]').click(function(){
// 移動先を50px下にずらす
var adjust = 50;
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を調整
var position = target.offset().top + adjust;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
メモ
jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。
さいごに
スクロール楽しいですねー
次はどこにいきましょうかねー
