jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2012.12. 7

スクロールしながら移動するページ内リンクを実装する

Category:

最近ではどのサイトでも見かけるようになったうえ、パララックス表現の流行も相まって使用頻度が以前よりもずっと高くなっている、スクロールしながら移動するページ内リンクを実装する方法を、メモ書き程度に残しておきます。
(以前、別のページで掲載されていたものを参考にして流用したものだと思います。たぶん...)

var anch_scrl = function(){
	var	anchor = $('a[href^=#]'),
		flg = false;

	anchor.click(function(){
		if( flg === false ){
			var	hash = $(this.hash),
				hash_offset = $(hash).offset().top;
			flg = true;
			$('html, body').stop().animate({
				scrollTop: hash_offset
			}, 500, function(){
				flg = false;
			});
			return false;
		} else {
			return false;
		}
	});
};

$(document).ready(function(){
	anch_scrl();
});

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.