【JavaScript】スムーズスクロールを実装してみる

こんにちは！セミマサです。

JavaScriptを使ってスムーズスクロールを実装してみたので作り方をまとめておきます！

デモサイト
HTML
CSS
JavaScript
1. スクロール用スクリプト
  1. Destination関数
  2. Scroll関数
2. トップに戻るスクリプト
おわりに

デモサイト

今回のデモサイトになります。ChromeとFirefoxで動作確認済み。

HTML

<section>
    <div class="jump-box">
        <a class="jump">リンク先1へ</a>
        <a class="jump">リンク先2へ</a>
        <a class="jump">リンク先3へ</a>
        <a class="jump">リンク先4へ</a>
        <a class="jump">リンク先5へ</a>
    </div>
    <div class="space"></div>
</section>

<section>
    <h2 class="link">リンク先1</h2>
    <a class="top">topへ戻る</a>
    <div class="space"></div>
</section>

<section>
    <h2 class="link">リンク先2</h2>
    <a class="top">topへ戻る</a>
    <div class="space"></div>
</section>

<section>
    <h2 class="link">リンク先3</h2>
    <a class="top">topへ戻る</a>
    <div class="space"></div>
</section>

<section>
    <h2 class="link">リンク先4</h2>
    <a class="top">topへ戻る</a>
    <div class="space"></div>
</section>

<section>
    <h2 class="link">リンク先5</h2>
    <a class="top">topへ戻る</a>
    <div class="space"></div>
</section>

</div>

</section>

<a class="top">topへ戻る</a>

</section>

<a class="top">topへ戻る</a>

</section>

<a class="top">topへ戻る</a>

</section>

<a class="top">topへ戻る</a>

</section>

<a class="top">topへ戻る</a>

</section>

今回のHTMLです。

・リンク元はjumpクラスを指定します。

・リンク先となる場所にはlinkクラスを指定しておきます。

・topクラスを指定した要素は後述するトップへ戻るスクリプト用です。

CSS

.space{
  height: 50vh;
}
.jump-box{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.jump,.top{
  cursor: pointer;
  padding: 8px 8px 8px 16px;
}
.jump:hover,.top:hover{
  opacity: .7;
}

.space{

height: 50vh;

}

.jump-box{

display: flex;

justify-content: center;

align-items: flex-start;

flex-direction: column;

}

.jump,.top{

cursor: pointer;

padding: 8px 8px 8px 16px;

}

.jump:hover,.top:hover{

opacity: .7;

}

今回のCSSです。

JavaScript

スクロール用スクリプト

const link_list = document.querySelectorAll('.link');
const jump_list = document.querySelectorAll('.jump');

const Destination = e =>{
    let num;
    e.target.classList.add('clicked');
    for(let i = 0; i < jump_list.length;i++){
        if(jump_list[i].classList.contains('clicked')){
            num = i;
            jump_list[i].classList.remove('clicked');
        }
    }
    Scroll(num);
}
const  Scroll = number =>{
    let Destination_top = link_list[number].offsetTop;

    window.scrollTo({
        top:Destination_top,
        behavior: "smooth"
    });
}

for(let i = 0;i < jump_list.length;i++){
    jump_list[i].addEventListener('click', Destination,false);
}

const link_list = document.querySelectorAll('.link');

const jump_list = document.querySelectorAll('.jump');

const Destination = e =>{

let num;

e.target.classList.add('clicked');

for(let i = 0; i < jump_list.length;i++){

if(jump_list[i].classList.contains('clicked')){

num = i;

jump_list[i].classList.remove('clicked');

}

Scroll(num);

}

const Scroll = number =>{

let Destination_top = link_list[number].offsetTop;

window.scrollTo({

top:Destination_top,

behavior: "smooth"

});

}

for(let i = 0;i < jump_list.length;i++){

jump_list[i].addEventListener('click', Destination,false);

}

今回のメインとなるスクリプトです。

・ querySelectorAllを使ってlinkクラスのリストをlink_listへ、jumpクラスのリストをjump_listへ格納しています。

・for文を使ってjump_list内の 各要素にクリックイベントを追加しています。

Destination関数

スクロール先を判定するスクリプトです。

①：クリックされたjumpクラスを持つ要素にclickedクラスを付与します。

②：for文を用いてクリックされた要素が何番目か調べます。※clickedクラスの有無で判定します。

③：Scroll関数に②で取得した番号を渡します。

Scroll関数

スムーズスクロールを行う関数です。

①：Destination関数から渡された番号に対応したリンク先の位置を取得し、Destination_topに格納します。

②：scrollTo関数を使ってスクロールさせます。移動先はDestination_topを指定します。behaviorにsmoothを指定するとスムーズスクロールになります。

トップに戻るスクリプト

const top_list = document.querySelectorAll('.top');

const TopTo = ()=>{
    window.scrollTo({
        top:0,
        behavior: "smooth"
    });
}

for(let i = 0;i < top_list.length;i++){
    top_list[i].addEventListener('click', TopTo,false);
}