ボタンを押したら指定のところまでスクロールさせたい

Question

前提・実現したいこと

ボタンを押したら指定したところまでスクロールしてくれるアニメーションをjQueryで作りたい。
ヘッダーについているボタンでそれぞれスクロールさせたいが、作動しない

発生している問題・エラーメッセージ

ありません

該当のソースコード

<header class="fixed-top" id="nav">
		<div class="header　container">
			<div class="row">
				<div class="half-air col-md-6"></div>
				<div class="col-md-6">
					<div class="row mr-5 d-flex justify-content-between">
						<div class="header-text col-3"><a href="" class="header-lead text-center">About</a></div>
						<div class="header-text col-3"><a href="" class="header-successor text-center h-sc-1">Service</a></div>
						<div class="header-text col-3"><a href="" class="header-successor text-center h-sc-2">Portfolio</a></div>
						<div class="header-text col-3"><a href="" class="header-successor text-center h-sc-3">Contact</a></div>
					</div>
				</div>
			</div>	
		</div>
</header>

該当のソースコード

$(".header-lead").click(function(){
    $(window).scrollTop(300);
});

試したこと

animateなど動きを滑らかにするところは除き、最も根幹にあるプログラムだけで検証しましたが、動きませんでした。上記のjQueryのプログラムで３００進んだところへ画面が飛んでくれると思い組みましたが、元の位置から少しも動きませんでした。

補足情報（FW/ツールのバージョンなど）

HTML5　css3 bootstrap4

Answer 1

<a>にhref属性をつけている場合は注意が必要です。jQueryで指定した位置にスクロールをしたとしてもHTMLに記述されたhrefの場所に移動しようとし、結果、hrefに何も記述されていないため一番上に戻ってきてしまいます。このような既定のアクションを取り下げるのには、以下のようにpreventDefault()を記述してください。

$('.header-lead').on('click', function (event) {
  event.preventDefault();
  $(window).scrollTop(300);
});

このままでは汎用性に乏しいのでid属性を使ったスムーズスクロールも紹介しておきます。id属性で内部リンクを張ったうえでご使用ください。

$('.header-lead').on('click', function (event) {
  // href属性を取得
  var href = $(this).attr('href');
  // href属性が"#"または空白であったらhtmlを、href属性が設定されていたらhrefをtargetに保存
  var target = $(href == "#" || href == "" ? 'html' : href);
  //既定のイベントを取り下げ
  event.preventDefault();
  //href属性のついた要素のtopの座標を取得
  position = target.offset().top;
  //その座標まで移動
  $('html, body').animate({ scrollTop: position }, 300, 'swing');
});

また、もしもこれで動かない場合はjQueryのslim版を使っていないかを確認してください。slim版ではanimateを含むajax系の関数は使用できません。

Comments

[takato.work]

回答して頂きありがとうございます。こちらを試したところうまく動作しました。また、スムーススクロールの解説まで行っていただきありがとうございます。とても助かりました。

Answer 2

こちらで、いかがでしょうか?

$('.header-lead').click(function() {
    $('html, body').scrollTop(300);
});

Comments

[takato.work]

回答していただきありがとうございます。こちらで試してみましたが、soliste16様が仰っているevent.preventDefault();をつけないと動かないようでした。

[new1ro]

なるほど、aタグ使用時に必要なのですね。確かに..
勉強になりました！