【js】「ページトップへ戻る」ボタンをwordpressに実装する

最近のサイトに多い、下方にスクロールすると「ページトップへ戻る」ボタンが出現するスクリプト。

ここを参考に実装した。

*いくつか変更点あり。


【javascript】

jQuery(function() {
		
	//「topへ戻る」ボタンの設置
	var topBtn = jQuery('#pageTop');
	topBtn.hide();
	jQuery(window).scroll(function () {
		//画面上部から700スクロールした場合
		if (jQuery(this).scrollTop() > 700) {
			topBtn.fadeIn();
			
		} else {
			topBtn.fadeOut();
		}
	});
	topBtn.click(function () {
		jQuery('body , html').animate({
			scrollTop: 0
		}, 50);
		return false;
	});
});

*1:
wordpressの場合、jQueryの他にprototype.jsも使用している。
そのため「$」は「jquery」に置き換なければならない。(コンフリクト回避) -> 参考


【css】
#pageTop{
	display:none;
	padding:0px;
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:100;
}

*2:
display:none;を追加した。
これがないとDOM構築時に一瞬アイコンが表示されてしまうため。

【html】
<a id="pageTop" href="#page"><img src="./wp-content/themes/twentyeleven/images/icn_pagetop.png" alt="ページtopへ" width="32" height="32" /></a>



– – – – – – – – – – –
2013/06/06追記

wordpressプラグインがありました。
WordPress”トップに戻る”プラグインScroll to Top