jQuery3系でスムーススクロール

jQuery3系でスムーススクロール

あれ?この前まで動いてたのに、スムーススクロールが動かなくなった!というのを学生から続けて質問されたので調べました。

ということで、jQuery3系で動くスムーススクロールはこう書きます。

これまでのスムーススクロール

これがWeb上で検索してでてくるスムーススクロールです。

$(function(){
	$('a[href^=#]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

 

jQuery3系で動くスムーススクロール

こちらが、jQuery3系で動くスムーススクロールです。

$(function(){
	$('a[href^="#"]').click(function(){
		var speed = 500;
		var href= $(this).attr("href");
		var target = $(href == "#" || href == "" ? 'html' : href);
		var position = target.offset().top;
		$("html, body").animate({scrollTop:position}, speed, "swing");
		return false;
	});
});

 

で、結局ナニが違うの?

2行目、赤色の部分 #(シャープ)をダブルクォーテーションで囲むだけ。

【旧】$(‘a[href^=#]’).click(function(){

【新】$(‘a[href^="#"]’).click(function(){

 

関連記事