HTMLの指定した要素の位置に移動する方法3選！

こんにちは。まさきです。

今回はHTMLで作成した画面でボタンやリンクをクリックしたときに、指定した要素の位置に移動やスクロールする方法を3種類ご紹介します。

結論
HTMLの<a>タグのhref属性を使う
1. メリット
2. デメリット
JavaScript標準機能のwindow.scrollToメソッドを使う
1. メリット
2. デメリット
jQueryのanimateメソッドのscrollTopを使う
1. メリット
2. デメリット

結論

結論から言いますと以下の3パターンあります。

HTMLの<a>タグのhref属性にスクロールしたい要素のIDを設定して移動する。
JavaScript標準機能のwindow.scrollToメソッドを使ってスクロールしながら移動する。
jQueryのanimateメソッドのscrollTopプロパティに値を設定してスクロールしながら移動する。

どれも用途が違いますので、使いやすいものを選んで使ってみてください。

今回はボタンをクリックすると指定した色まで移動するHTMLを例にご説明していきます。

全体のコードはこちらです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <title>Scroll</title>
    <script>
        const scrollBlue = function () {
            const blueLeft = document.getElementById("blue").getBoundingClientRect().left;
            const blueTop = document.getElementById("blue").getBoundingClientRect().top;
            window.scrollTo({
                left: blueLeft,
                top: blueTop,
                behavior: 'smooth'
            });
        };
        $(function ($) {
            $('#greenBtn').on('click',function(){
                const greenTop = $('#green').offset().top;
                $("html").animate({scrollTop: greenTop});
            });
        });
    </script>
</head>
<body>
    <div style="height:200px; width:100%;">
        <a href="#red"><input type="button" value="赤" /></a>
        <input type="button" value="青" onclick="scrollBlue()" />
        <input type="button" value="緑" id="greenBtn" />
    </div>
    <div id="red" style="height:300px; width:100%; background-color:red;"></div>
    <div id="blue" style="height:300px; width:100%; background-color:blue;"></div>
    <div id="green" style="height:300px; width:100%; background-color:green;"></div>
    <div style="height:1000px; width:100%;"></div>
</body>

</html>

では詳細なご説明をします。

HTMLの<a>タグのhref属性を使う

HTMLを書いたことある方は<a>タグを使ったことはあると思いますが、
基本的にはリンクを設定するときや、ボタンの見た目を作るために使うことが主です。

ですが、hrefに要素のidを設定することでその要素の位置まで移動するという使い方もできます。

全体のコードから必要な部分だけ抜き出すとこのようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Scroll</title>
</head>
<body>
    <a href="#red"><input type="button" value="赤" /></a>
    <div id="red" style="height:300px; width:100%; background-color:red;"></div>
</body>
</html>

まず、スクロールしたい要素のidを設定します。今回はid=”red”としています。

次に<a>のhrefに移動先の要素のidを設定しています。今回はhref=”#red”としているところです。

#はIDセレクタの意味です。

また移動先のidの指定は他のファイルもできます。同じディレクトリのfoo.htmlのidがbarの要素まで移動する場合はhref=”./foo.html#bar”のように書きます。

また移動後はURLに#redが付いたURLを再読み込みする形になります。

元はindex.htmlだったが、クリックしたらindex.html#redになっている。

メリット

メリットはURLが変わるのでブックマークできることがあります。
この状態でブックマークすると指定されたidの要素まで移動した状態で開きます。

サイトの目次などに使われていて、目次をクリックするとその内容の場所まで移動するのはこういった仕組みです。

もう一つは<a>タグに書いているので共通した部品として管理しやすいことです。

例えば「お問い合わせフォーム」まで移動する場合に、お問い合わせ用のボタンのhref属性に全て同じ遷移先のIDを書いておけば、漏れを見つけやすいですし、動的にも要素を作成しやすいです。

ホームページなどはいくつかのページから同じページに遷移するボタンが多く必要になると思いますが、そのときに使いまわせます。

デメリット

デメリットはURLが変わってしまうのでクリック時に画面が再読み込みされることと、ページをリロードしたときにURLがID指定のものが呼び出されるところです。

JavaScriptで画面表示時の処理をがっつり書いている場合は変な挙動するかもしれません。

またこの方法ではスクロールはしないので、スクロールしながら移動したい場合は他の方法を使いましょう。

<a>タグのhrefに指定するのは、静的なHTML/CSSがメインの画面で使うのがおすすめですね。

JavaScript標準機能のwindow.scrollToメソッドを使う

JavaScript標準で用意されているwindowオブジェクトにはいくつかの機能が提供されています。

windowオブジェクトの内容はMozillaのドキュメントを参考ください。

その中のscrollToメソッドでは特定の位置にスクロールすることができます。

window.scrollTo({
  top: 200,          //上からの位置
  left: 100,         //左からの位置
  behavior: 'smooth' //smoothでスクロールしながら移動
});

このメソッドでは位置しか指定できないので、要素に移動する場合は要素の位置を事前に取得する必要があります。

では全体のコードから必要な部分だけ抜き出したコードを確認しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Scroll</title>
    <script>
        const scrollBlue = function () {
            const blueLeft = document.getElementById("blue").getBoundingClientRect().left;
            const blueTop = document.getElementById("blue").getBoundingClientRect().top;
            window.scrollTo({
                left: blueLeft,
                top: blueTop,
                behavior: 'smooth'
            });
        };
    </script>
</head>
<body>
    <input type="button" value="青" onclick="scrollBlue()" />
    <div id="blue" style="height:300px; width:100%; background-color:blue;"></div>
</body>
</html>

今回はボタンのonclick属性でクリックしたときにscrollBlueメソッドを呼び出すように設定しています。

ではscrollBlueメソッドでスクロールする流れをご説明します。

const blueLeft = document.getElementById("blue").getBoundingClientRect().left;
const blueTop = document.getElementById("blue").getBoundingClientRect().top;

まずはdocument.getElementById()でIDから要素を取得します。
これでid=”blue”にした要素を取得します。その後getBoundingClientRect()で要素の位置をtopとleftの形で取得します。

 window.scrollTo({
     left: blueLeft,
     top: blueTop,
     behavior: 'smooth'
});

スクロールしたい要素の位置を取得したらwindow.scrollToメソッドでスクロールします。

引数にはオブジェクト形式でleftとtopを設定します。
スクロールしながら移動する場合はbehavior: ‘smooth’も設定します。

メリット

メリットはJavaScriptだけで完結するのでどの環境でも使えます。

HTMLさえ使えれば他にjQueryのようなライブラリを読み込まず書くことができます。

また、スクロールと同時に他の処理を行いたい場合はメソッド内にまとめることができます。

デメリット

JavaScriptの標準の機能を使っていますが、実際大規模の開発ではjQueryなどの機能を使うのであまり見ません。

知識として覚えておくとライブラリが使えない環境で役立つので覚えておくといいでしょう。

jQueryのanimateメソッドのscrollTopを使う

jQueryのanimateメソッドは画面に動きを付けるアニメーションを与えるときに使用します。

今回はscrollTopでスクロールを行っていますが、他にも要素を大きくしたり要素を移動させたりできます。

では、全体のコードから必要な部分だけ抜き出してご説明します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <title>Scroll</title>
    <script>
        $(function ($) {
            $('#greenBtn').on('click',function(){
                const greenTop = $('#green').offset().top;
                $("html").animate({scrollTop: greenTop});
            });
        });
    </script>
</head>
<body>
    <input type="button" value="緑" id="greenBtn" />
    <div id="green" style="height:300px; width:100%; background-color:green;"></div>
</body>
</html>

まずjQuery使うためにCDNを使って読み込みます。

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

バージョンはそのときの最新を使ってください。バージョンはjQueryのサイトから確認してください。

これでjQueryが使えるようになるのでクリックしたときのイベントをonメソッドで作成します。

$(function ($) {
    $('#greenBtn').on('click',function(){
    });
});

メソッド内では先ほどのwindow.scrollToと同じように要素の位置を取得します。

要素の位置はJavaScriptで取得した方法もありますが、jQueryを使っても取得できます。

const greenTop = $('#green').offset().top;

その後animateメソッドに取得した値を設定します。
この時$(“html”)は固定です。

$("html").animate({scrollTop: greenTop});

メリット

jQueryを使っているシステムは結構多いので、そういった場合に使いやすいです。

またjQueryは見慣れている人も多いので、コードからどういった処理が行われているかが理解されやすいです。

デメリット

当たり前ですが、jQueryを使わない場合は使えないです。最近のVue.jsやReactの画面では使えません。

逆に言うとjQueryが使えるならこの書き方が一番おすすめです。

以上がHTMLで作成した画面で、指定した要素の位置に移動やスクロールする方法3選でした。

最後まで読んで頂きありがとうございました。