ISSEN 
はじめに
今回のテーマは「Javascriptでゆっくりな自動スクロールを実装！」です。
jQueryを使わないバニラJavascriptで実装する方法を説明します。
以前に紹介した「CSSだけでスムーススクロールしてみた」の記事の続きです。
対象となる方
-
HTMLやCSS、Javascriptを勉強中の方
-
サイトをよりリッチにしたいという方
-
ゆっくり動く自動スクロールを実装したい方
Javascriptの自動スクロールについて
CSSのスムーススクロールも、最近のアップデートでsafariでも使えるようになりましたが、
まだまだ対応していないブラウザやバージョンが多いので、Javascriptのスムーススクロールを覚えておくと良いと思います！
コーディング
さっそく実装に移っていきます！
<ul class="c-menu">
<li class="c-menu__item">
<a class="c-menu__link" href="#link01">link01</a>
</li>
<li class="c-menu__item">
<a class="c-menu__link" href="#link02">link02</a>
</li>
<li class="c-menu__item">
<a class="c-menu__link" href="#link03">link03</a>
</li>
</ul>
<div class="c-space"></div>
<div id="link01" class="c-content">link01のコンテンツ</div>
<div id="link02" class="c-content">link02のコンテンツ</div>
<div id="link03" class="c-content">link03のコンテンツ</div>
<div class="c-space"></div>
.c-menu {
display: flex;
}
.c-menu__item {
list-style: none;
}
.c-menu__link {
border: 1px solid #dddddd;
color: #333333;
padding: 10px 40px;
text-decoration: none;
}
.c-space {
height: 100vh;
}
.c-content {
align-items: center;
border-top: 1px solid #dddddd;
display: flex;
height: 200px;
justify-content: center;
}
HTMLとCSSは簡単に、こんな感じです。
ページ上部にメニューボタンと、真ん中に余白、下の方にコンテンツを3つ並べました。
いよいよJavascriptです。
全コードはこんな感じです。
const scorrllLinks = document.querySelectorAll('a[href^="#"]');
scorrllLinks.forEach((scorrllLink) => {
scorrllLink.addEventListener("click", (e) => {
e.preventDefault();
const hrefLink = scorrllLink.getAttribute("href");
const targetContent = document.getElementById(hrefLink.replace("#", ""));
const rectTop = targetContent.getBoundingClientRect().top;
const positionY = window.pageYOffset;
const target = rectTop + positionY;
window.scrollTo({
top: target,
behavior: "smooth",
});
});
});まずはじめに、querySelectorAllメソッドで該当の要素をまとめて引っ張ってきます。
今回は、クリックするボタンの要素を持ってきます。
const scorrllLinks = document.querySelectorAll('a[href^="#"]');その要素1つ1つに対して処理をするように、forEachメソッドを使います。
引数にscrollLinkを渡し、関数の中でもその要素の情報（scorrllLinksの情報）が使えるようにします。
scorrllLinks.forEach((scorrllLink) => {});そうしたら、クリックイベントを発生させます。
その際に、イベントのデフォルトの動作を無くしてあげる必要があります。
e.preventDefault();ていうやつです。
今回は、ボタンを押すと勝手にリンク先まで移動してしまうデフォルトの動作を無くします。
最初のうちは書くのを忘れがちなので、しっかりチェックしておきましょう。
次に、引っ張ってきた要素の情報を成形していきます。
必要なのは、遷移先のリンクと遷移先の位置なのでこんな感じです。
const hrefLink = scorrllLink.getAttribute("href");
const targetContent = document.getElementById(hrefLink.replace("#", ""));
const rectTop = targetContent.getBoundingClientRect().top;
const positionY = window.pageYOffset;
const target = rectTop + positionY;getAttributeメソッドでhref属性の情報を取り、その情報から # を抜くために replaceメソッドを使用します。
必要な情報はすべて揃いました。いよいよ、ゆっくり自動でスクロールする、スムーススクロールの処理です。
window.scrollTo({
top: target,
behavior: "smooth",
});windowオブジェクトに対して、scrollToメソッドを使用します。
プロパティに behavior: “smooth”, を指定することでゆっくり自動でスクロールするという仕組みです。
behavior: auto にするとデフォルトの動作をします。（瞬間移動のやつ）
これで完了です。
まとめ
今回は、Javascriptでゆっくりな自動スクロールを実装！について解説してきました。
これがあるだけでユーザーの体験が高まりリッチなサイトになるのでおすすめです！
Web制作におけるJavascriptの基礎固め学習にはこちらの書籍がおすすめです。
是非ご覧になってJavascriptの知識を深めていきましょう。
