-
ID:9yxqft さんの質問

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 件

ID:KSYXA2 さんの回答

>> スクロールがいちいちページの一番上から始まってしまう…。
ページそのものを移動してんだから当たり前だろうに…。

ID:mBsECZ さんの回答

$(’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;
});

でいいんじゃない?

ID:3qymKy さんの回答

jQueryに頼らずに標準技術とポリフィルでやりなさい。
ttp://dev.w3.org/csswg/cssom-view/#extensions-to-the-window-interface

最終更新日:2014-11-21 (4,019 views)

関連するトピックス

ページ上部に戻る