IT Programming

【コーディング】ページ内の指定の場所に移動させる方法を解説!

とあるコーダー
とあるコーダー
ページ内でクリックしたら指定の場所に移動させる方法が知りたいなあ。わかりやすくお願いします。。

 

こういう疑問に答えます。

 

この記事を読むことで、以下の動作が実装できます。

 

ボタンクリック→jQueryが作動→指定の場所までスクロールされる

という感じで「ページ内の指定の場所に移動させる」を実装してます。

>>参照:jQueryとは?

 

 

これは実際にぼくのWeb制作ポートフォリオにも使った方法です。

>>参考:ぼくのポートフォリオサイト

*👆メニューバーをクリックするとページ内の要素に移動します。挙動を確認したい方はどうぞ。

 

また、1ページのみのランディングページなどにもこの手法が使えますのでぜひ最後までどうぞ。

 

ページ内の指定の場所に移動させる方法を解説

まず冒頭にお見せしたもののコードを載せますね。コピペOKです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページ内の指定の場所に移動させたい</title>
    <style>

        body{
            background-color:#BFBEA7;
            margin:0;
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        .title{
            margin:150px 0;
            text-align: center;
            font-size: 30px;
            font-weight: 500;
        }

        .title span{
            padding:20px;
            background-color: white;
        }

        .page-move-before{
            font-size: 20px;
            text-align: center;
            height: 3000px;
        }

        .page-move-before span{
            padding:10px;
            background-color:#E468F0;
            box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
        }

        .page-move-after{
            margin-bottom: 1500px;
            font-size: 20px;
            padding:20px;
            text-align: center;
            background-color: red;
            box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
        }

    </style>
</head>
<body>

    <header class="title">
        <span>今から、ページ内の指定の場所に移動させます!</span>
    </header>

    <div class="page-move-before">	
        <span>ここを押すと、ページ内の指定の場所に移動</span>
    </div>

    <div class="page-move-after">
        こっちに移動します!
    </div>

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

    <script>

        $(".page-move-before span").click(function () {
            $("html,body").animate({scrollTop:$(".page-move-after").offset().top});
        });

    </script>

</body>
</html>

 

長いコードで煩わしいですが、jQuery<script></script>のところに注目してください。

👇scriptの部分を切り抜いてみました。

<script>

    $(".page-move-before span").click(function () {
        $("html,body").animate({scrollTop:$(".page-move-after").offset().top});
    });

</script>

 

上記を日本語にすると

1. .page-move-before spanがクリックされたら

2. html、body(全体のエリア)にアニメーションをかける

3. .page-move-afterの一番上までスクロールする

→ .page-move-beforeがクリックされたら.page-move-afterの一番上までアニメーションつきでスクロールする

という感じになります。

 

jQueryを使わないでページ内移動を実装【aタグに直接記述】

jQueryを使わない方法は、アニメーションなしにはなりますが、一応できます。

 

やり方としては以下です。

1.移動先のエリアにid属性を追加

2.クリックする要素をaタグで挟んでhref=""に移動先エリアのidを追加する

aタグのhref属性にidを記述するときは上記のように#をつけましょう。

 

これを実装したのが以下です。

見ての通り、アニメーションはつきません。

<a href="#aタグでも移動"><header class="title">
    <span>aタグから移動させます</span>
</header>
</a>

<div class="page-move-after" id="aタグでも移動">
    こっちに移動します!
</div>

 

 

ちなみに、「移動先エリアにclass属性を指定して、クリックする要素のhref属性に. をつけても同じことができるのでは?」と思ったかもですが、実査にやってみてもできませんでした。

 

おそらくid属性でしか機能しないのでしょう。

 

まとめ:ページ内の指定の場所に移動させる方法を解説

この記事では、ページ内で指定の場所に移動させる方法を解説してきました。

 

最後にご紹介したlQeuryを使わない方法は、「アニメーションを極力使わず、サイトの読み込みを早くしたい」という方におすすめかもしれません。

 

ページトップへ移動させる方法も解説してますので、ぜひどうぞ。

【コピペでちょーカンタン!】トップへ戻るボタンの実装方法

 

それじゃ~


スポンサードリンク

-IT, Programming

© Copyright March/2020 タクミ