JavaScript でのスムーズスクロール

Muhammad Muzammil Hussain 2023年6月20日

JavaScript JavaScript Scroll

この記事では、JavaScript でスムーズスクロール機能を使用する方法について説明します。例として、スクロール機能を呼び出すイベントを作成します。

ページ内のナビゲーションエクスペリエンスを強化するために、ユーザーインターフェイスパターンであるスムーズスクロールを使用します。ページのスクロールボックス内でのアニメーションによる位置の変化です。

JavaScript、jQuery、およびその他のプラグインを使用してそのスクロールパターンを作成および実装する方法は複数ありますが、現時点では、この機能のために JavaScript と jQuery ソリューションを使用します。

JavaScript でのスムーズスクロール

JavaScript では、Web ページの現在の位置を変更し、アニメーションで別の位置に移動するクリックイベントで関数を呼び出すことができます。

jQuery にはデフォルトのメソッド animate() があり、scrollTop、タイマーとしてのミリ秒、およびスクロールが完了した後に呼び出されるコールバック関数を使用して、オブジェクトを含む位置からオブジェクトを渡します。

コード例:

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    // smooth scrolling function on anchor tag
    $("a").on('click', function(event) {
        // if this.hash contain value
        if (this.hash !== "") {

            //default anchor click prevention
            event.preventDefault();

            // save hash
            var myHash = this.hash;

            // jQuery animate() method to call scroll
            // 1200 milliseconds takes to scroll to the desired area
            $('html, body').animate({
                scrollTop: $(myHash).offset().top
            }, 1200, function(){
                // when done scroll add # to URL
                window.location.hash = myHash;
            });
        } // End if
    });
});

</script>

<style>

#section_top {
    height: 600px;
    border-style: solid;
    border-width: 1px;
    padding:5px
}

#section_down {
    height: 600px;
    border-style: solid;
    border-width: 1px;
    padding:5px
}

</style>
</head>

<body>

<h1>Delftstack learning</h1>
<h4>Smooth scrolling using JavaScript.</h4>

<div class="main" id="section_top">

    <h2>Top Section</h2>

    <a href="#section_down">Click here to Smooth Scroll to down Section</a>

</div>

<div class="main" id="section_down">

    <h2>Down Section</h2>

    <a href="#section_top">Click here to Smooth Scroll to top Section</a>

</div>

</body>

</html>

上記の HTML ソースコードでは、HTML と CSS の <div> 要素を使用して複数のセクションを作成しています。セクションの ID を定義して、位置を変更し、スタイリングを実装しました。

両方のセクションにアンカータグを作成し、その要素に href を定義しました。 HTML ページの先頭に、jQuery のデフォルトメソッド animate() を使用するための jQuery リンクを含めました。

script タグ内のアンカータグをクリックすると、スクロール機能が呼び出されます。スクロール関数内で、ハッシュ値をチェックする必要があります。値がある場合は、実行を続行します。

アンカータグのデフォルトの動作を防止し、現在のハッシュを保存しました。 1200 ミリ秒のタイマーと目的のスクロール位置を指定して、jQuery 関数 animate() を呼び出しました。

上記のソースを HTML 拡張子で保存し、任意のブラウザーで開いて、スムーズスクロールの結果を確認できます。

JavaScript でのスムーズ スクロール

関連記事 - JavaScript Scroll

JavaScript でのスムーズスクロール