[JS]jQueryのスムーススクロールで着地点の位置を微妙にずらす方法｜Javascriptスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

[JS]jQueryのスムーススクロールで着地点の位置を微妙にずらす方法

スポンサード

jQueryのスムーススクロールを使って指定の場所へページ内遷移した時、アンカー名から上下に位置にずらして着地させる方法のご紹介です。

例えばヘッダーがページ上部に固定されていて、ヘッダーの高さ分だけ着地点を調整しないといけないような場合に便利なカスタマイズです。

1 着地点を100px下にずらす
2 着地点を100px上にずらす

着地点を100px下にずらす

まずは100pxだけ下にずらす場合のコード例です。

<script src="./jquery.min.js"></script>
<script>
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top + 100;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>

$(function(){

$('a[href^=#]').click(function(){

var speed = 500;

var href= $(this).attr("href");

var target = $(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top + 100;

$("html, body").animate({scrollTop:position}, speed, "swing");

return false;

});

</script>

着地点を100px上にずらす

今度は100px上にずらす場合です。

<script src="./jquery.min.js"></script>
<script>
$(function(){
$('a[href^=#]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top - 100;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>