【Javascript】Javascriptでゆっくりな自動スクロールを実装！
はじめに
こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！
今回のテーマは「JavaScriptでゆっくりな自動スクロールを実装！」です。
jQueryを使わないバニラJavaScriptで実装する方法を説明します。
以前に紹介した「CSSだけでスムーススクロールしてみた」の記事の続きです。
【CSS】【簡単】CSSだけでスムーススクロール
CSSのscroll-behaviorプロパティを使ったスムーススクロールの実装方法を解説します。JavaScriptを使わず、たった1行の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 scrollLinks = document.querySelectorAll('a[href^="#"]')
scrollLinks.forEach((scrollLink) => {
scrollLink.addEventListener("click", (e) => {
e.preventDefault()
const hrefLink = scrollLink.getAttribute("href")
const targetContent = document.getElementById(hrefLink.replace("#", ""))
const rectTop = targetContent.getBoundingClientRect().top
const positionY = window.scrollY
const target = rectTop + positionY
window.scrollTo({
top: target,
behavior: "smooth",
})
})
})まずはじめに、querySelectorAllメソッドで該当の要素をまとめて引っ張ってきます。
今回は、クリックするボタンの要素を持ってきます。
const scrollLinks = document.querySelectorAll('a[href^="#"]')その要素1つ1つに対して処理をするように、forEachメソッドを使います。
引数にscrollLinkを渡し、関数の中でもその要素の情報（scrollLinksの情報）が使えるようにします。
scrollLinks.forEach((scrollLink) => {})そうしたら、クリックイベントを発生させます。
その際に、イベントのデフォルトの動作を無くしてあげる必要があります。
e.preventDefault()ていうやつです。
今回は、ボタンを押すと勝手にリンク先まで移動してしまうデフォルトの動作を無くします。
最初のうちは書くのを忘れがちなので、しっかりチェックしておきましょう。
次に、引っ張ってきた要素の情報を成形していきます。
必要なのは、遷移先のリンクと遷移先の位置なのでこんな感じです。
const hrefLink = scrollLink.getAttribute("href")
const targetContent = document.getElementById(hrefLink.replace("#", ""))
const rectTop = targetContent.getBoundingClientRect().top
const positionY = window.scrollY
const target = rectTop + positionYgetAttributeメソッドでhref属性の情報を取り、その情報から#を抜くためにreplaceメソッドを使用します。
必要な情報はすべて揃いました。
いよいよ、ゆっくり自動でスクロールする、スムーススクロールの処理です。
window.scrollTo({
top: target,
behavior: "smooth",
})windowオブジェクトに対して、scrollToメソッドを使用します。
プロパティにbehavior: "smooth"を指定することでゆっくり自動でスクロールするという仕組みです。
behavior: "auto"にするとデフォルトの動作をします。
（瞬間移動のやつ）
これで完了です。
まとめ
今回は、JavaScriptでゆっくりな自動スクロールを実装！について解説してきました。
これがあるだけでユーザーの体験が高まりリッチなサイトになるのでおすすめです！
Web制作におけるJavaScriptの基礎固め学習には以下の書籍がおすすめです。
是非ご覧になってJavaScriptの知識を深めていきましょう。
Amazon
Amazon
amzn.toこの記事を書いた人
