こういう疑問に答えます。
この記事を読むことで、以下の動作が実装できます。
という感じで「ページ内の指定の場所に移動させる」を実装してます。
>>参照：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属性でしか機能しないのでしょう。
おまけ：ページ遷移を少し下にずらす方法
今まで解説してきたものだと、遷移後に要素が一番上に来るようになってます↓
しかし、例えば一番上にメニューバーを固定させている場合などにメニューバーに隠れてしまい、遷移後の要素が見えなくなることがあります↓
なので、その改善方法を最後にご紹介します。
以下のように、少しずらせる方法を教えます。
やり方はものスゴく簡単で、遷移後の要素に以下のCSSを追加すればOKです。
padding-top:◯px;margin-top:-◯px;
◯にお好きな数値を入れて調整して下さい。
（例. padding-top:90px; margin-top:-90px;）
すると、遷移後の要素が一番上から少し下にずれていることが確認できると思います。
今回はわかりやすいように背景色をつけていますが、同じように「背景色をつけている方」は文字がブロックの下に寄っていて気になるかもですね。
そういうときは
padding-bottom:90px;
などをつけると↓のようにいい感じになるかもしれません。
まとめ：ページ内の指定の場所に移動させる方法を解説
この記事では、ページ内で指定の場所に移動させる方法を解説してきました。
最後にご紹介したlQeuryを使わない方法は、「アニメーションを極力使わず、サイトの読み込みを早くしたい」という方におすすめかもしれません。
ページトップへ移動させる方法も解説してますので、ぜひどうぞ。
そんじゃ