jQueryでのスムーズスクロールについて質問させて下さい。
$(’a[href^=#]’).click(function() {
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ’html’ : href);
var position = target.offset().top;
$(’body,html’).animate({scrollTop:position}, speed, ’swing’);
return false;
});
上記で設置をしてみたのですが、
<a href="<?php echo home_url(); ?>/#hogehoge">hoge</a>
と外部リンクにも対応できるようにしたいので#から始まると宣言しているところを、(’a[href*=#]’)とか(’a[href*="#"]’)とか(’a[href*="http://www.hogehogehoge/#"]’)とかに変えてみたのですが上手く動作せず…。
この方法では無理なのかと考え、下記に総変えしてみたのですが、
$(function(){
var url = $(location).attr(’href’);
if (url.indexOf("?id=") == -1) {
// スムーズスクロール以外の処理
}else{
// スムーズスクロールの処理
var url_sp = url.split("?id=");
var hash = ’#’ + url_sp[url_sp.length - 1];
var tgt = $(hash);
var pos = tgt.offset().top;
$("html, body").animate({scrollTop:pos}, 400, "swing");
}
});
外部のアンカーリンクにも対応してくれるようにはなったのですが、スクロールがいちいちページの一番上から始まってしまう…。
?idを#に置き換えている所以外はほとんど同じことのように見えるのですが、なぜスクロールの結果が変わるのか分からず悩んでいます。
アドバイス頂けると嬉しいです。
みんなの回答 3 件
>> スクロールがいちいちページの一番上から始まってしまう…。
ページそのものを移動してんだから当たり前だろうに…。
$(’a[href^=#]’).click(function() {
var speed = 400;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? ’html’ : href);
var position = target.offset().top;
var url = $(location).attr(’href’);
if (url.indexOf("今のドメイン名とか") >= -1) {
$(’body,html’).animate({scrollTop:position}, speed, ’swing’);
}
return false;
});
でいいんじゃない?
jQueryに頼らずに標準技術とポリフィルでやりなさい。
ttp://dev.w3.org/csswg/cssom-view/#extensions-to-the-window-interface
関連するトピックス