[jQuery]「トップに戻る」とか「追従するアイコン」とか

あけましておめでとうございます。（笑）
更新が止まって数ヶ月、忙しかったのもありますが、ブログ更新のやる気が出ませんでした。

ページトップへ戻る

さて、テーマのコーディングをご依頼いただくと、「ページトップへ戻る」が必須で入っていたりしますが、jQueryのバージョンの関係とか、ブラウザのバージョンの関係とかで動かくなってしまう不具合があります。
現状で動くのは、こんな感じかと。
300px以上スクロールしたらフェードインで表示。それ以外は非表示。

Javascript(jQuery)

jQuery(document).ready(function() {
	var pagetop = jQuery('#page-top');
	jQuery(window).scroll(function () {
		if (jQuery(this).scrollTop() > 300) {
			pagetop.fadeIn();
		} else {
			pagetop.fadeOut();
		}
	});
	pagetop.click(function () {
		jQuery('body, html').animate({ scrollTop: 0 }, 800);
		return false;
	});
});

HTML

<div id="page-top"><a href="#_top">PAGETOP</a></div>

CSS

#page-top {
	display: none;
	right: 20px;
	position: fixed;
	bottom: 40px;
}
#page-top a {
	margin: 0px;
	text-indent: -9999px;
	display: block;
	padding: 0px;
	height: 88px;
	width: 88px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-image: url(images/pagetop.png);
}
#page-top a:hover {
	opacity: 0.7;
}

WordPressの場合だと、いろいろありますが、「Scroll Back To Top」が簡単で便利です。
当サイトでも使用しています。

---

追従するアイコン

参考：スクロールしてもついてくる！ブログにソーシャルボックスをつけよう。｜ウェビメモ
参考：サイド固定のアイコンボックスを作ってみた : Digifiction WEBディレクターのチラシの裏

先日の案件で、「お問合せ」と「お申込み」をスクロールして表示＆追随がありました。
上記サイトを参考に制作しました。