今回はアンカーリンクへのスムーズスクロールの方法です。
ページ内リンク？とも言いますか？
そのへんの違いははっきりわかっていませんが、スルスルっとページ途中に飛んでくる方法です。
アンカーリンクへスムーズスクロールする方法！
$(document).ready(function(){
$('a[href^="#"]').click(function() {
let speed = 600; // ミリ秒で記述
let href = $(this).attr("href");
let target = $(href == "#" || href == "" ? 'html' : href);
let position = target.offset().top;
$('body,html').animate({ scrollTop: position }, speed, 'swing');
return false;
});
});基本的にはこれを。
着地するidの位置やpaddingの入れ方によっては
「もう少し上にしたい」とか「グローバルナビに被ってしまう」などいろいろありますね。
そんなときはこちら。
JavaScriptを使ってアンカーリンクへのスムーズスクロールを調整する方法
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
$(function() {
var offsetY = -100; //止まる位置のバランス調整用の値
var url = $(location).attr('href');
if(url.indexOf("?id=link") != -1){
var id = url.split("?id=");
var $target = $('#' + id[id.length - 1]);
if($target.length){
var pos = $target.offset().top+offsetY;
$("html, body").animate({scrollTop:pos}, 800);
}
}
});
} else {
$(function() {
var offsetY = -200; //止まる位置のバランス調整用の値
var url = $(location).attr('href');
if(url.indexOf("?id=link") != -1){
var id = url.split("?id=");
var $target = $('#' + id[id.length - 1]);
if($target.length){
var pos = $target.offset().top+offsetY;
$("html, body").animate({scrollTop:pos}, 800);
}
}
});
}PCとスマートフォンで条件分岐をして記述しています。
smpの方は3行目、PCの方は16行目を調整して使ってみてください。
上記コードでひとつ気になることはpx指定であったこと。
一応、vwでも成立するように書いてみました。実戦ではまだ使っていませんので調整必要かもです。
// スマートフォン/タブレット
if(navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
$(function() {
var offsetY = -5vw; //vw単位でバランス調整用の値を設定
var url = $(location).attr('href');
if(url.indexOf("?id=link") != -1){
var id = url.split("?id=");
var $target = $('#' + id[id.length - 1]);
if($target.length){
var pos = $target.offset().top * 100 / window.innerWidth + offsetY; //要素のオフセット位置をvw単位で取得
$("html, body").animate({scrollTop:pos}, 800);
}
}
});
}
// PC
else {
$(function() {
var offsetY = -10vw; //vw単位でバランス調整用の値を設定
var url = $(location).attr('href');
if(url.indexOf("?id=link_") != -1){
var id = url.split("?id=");
var $target = $('#' + id[id.length - 1]);
if($target.length){
var pos = $target.offset().top * 100 / window.innerWidth + offsetY; //要素のオフセット位置をvw単位で取得
$("html, body").animate({scrollTop:pos}, 800);
}
}
});
}
