上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

javascript と jQuery をつかってスムーズスクロールをウェブサイトに導入することは割とよくあると思います。ドラクエ11攻略プロジェクトでも導入ました。

しかし、なぜか全く動かない。うんともすんとも言わない。
「なぜか」というとjavascriptのコードが間違っているんでしょうけど、なぜかがわからない状態でした。

jQueryのコードは、(おそらく)よく見かける以下です。

jQuery(function() {
// #で始まるアンカーをクリックした場合に処理
$("a[href^=#]").click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-60;//固定メニューの分ずらす
$('body, html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});

なので、return false の前に console.log('clicked') と追加してみてどうなるか確認したのですが、そもそもコンソールに clicked と表示されない。

…ということで、jQueryのセレクタの書き方が不正でした。
正しくは 'a[href^="#"]' と、#をダブルクオーテーションで括る必要がありました。

スムーズスクロールが動作したコードは以下のとおりです。
jQuery(function() {
// #で始まるアンカーをクリックした場合に処理
$('a[href^="#"]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top-60;//固定メニューの分ずらす
$('body, html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
Related Posts

Thoughts on スポンサーサイトjQueryのスムーズスクロールが動かないときの解決方法

Leave a Reply

* less than 16 characters
* less than 24 characters
* less than 16 characters
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。