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

2017/04/12
- jQuery

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

ということで、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;
	});
});