スマホでページ内リンクが効かない

24965 Views
2017年09月20日 JavaScript

レスポンシブやスマートフォン専用ページでページ内リンクを実装した時に、稀にページ内リンクが効かなくなる時があります。

理想はクリックしたらスムーススクロール（スムーズスクロール）して欲しいのですが、なぜか動作しない。

そんな時は普段使いしてるスムーススクロールのjsを紹介する内容に変更して見てください。

SNSでシェア♪

プログラム

$(function() {
	$("body").on("click", "a", function(e) {
		var _this = $(this);
		var _href = _this.attr("href");
	
		if (_href.charAt(0,1) == "#") {
			e.preventDefault();
			var _target  = $(_href == "#" || _href == "" ? $("html") : _href);
			if (_target.length == "0") _target = $("html");
			var position = _target.offset().top;
			var _scroll  = _this.data("scroll");
			if (_scroll !== undefined) position = position + Number(_scroll);
			if (position <= 0) position = 1;	//Android2系でスクロールのバグ対策
			$("html, body").animate({scrollTop : position} ,500, "swing");
			return false;
		}
	});
});

$(function() {

$("body").on("click", "a", function(e) {

var _this = $(this);

var _href = _this.attr("href");

if (_href.charAt(0,1) == "#") {

e.preventDefault();

var _target = $(_href == "#" || _href == "" ? $("html") : _href);

if (_target.length == "0") _target = $("html");

var position = _target.offset().top;

var _scroll = _this.data("scroll");

if (_scroll !== undefined) position = position + Number(_scroll);

if (position <= 0) position = 1; //Android2系でスクロールのバグ対策

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

return false;

}

});

以上です！
※jQuery必須
※2017/10/13 iOSで動作しなかった問題を修正しました

aタグに「data-scroll」の属性を持たせることで、スクロール位置を調整することもできます。
例「<a href=”#news” data-scroll=”-100″>ニュースへ移動</a>」
　「<a href=”#about” data-scroll=”50″>会社概要へ移動</a>」

SNSでシェア♪

スマホでページ内リンクが効かない

プログラム

関連記事