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

スポンサーリンク
スムーズスクロールアイキャッチ プログラミング

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

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

デモサイト

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

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>

今回の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;
}

今回の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);
}

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

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

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

Destination関数

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

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

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

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

Scroll関数

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

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

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

トップに戻るスクリプト

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);
}

スクロール用スクリプトと仕組みはだいたい同じです。

querySelectorAllを使ってtopクラスのリストをtop_listへ格納します。

・for文でtop_list内の 各要素にクリックイベントを追加します。

・scrollTo関数を使ってスクロールさせます。移動先を0にしてあげればOK。

おわりに

今回はスクロール先・スクロール元が増えても対応できるようなスムーズスクロール用スクリプトを書いてみました。

タイトルとURLをコピーしました