SQLの窓

2018年01月09日


ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)

このブログにも設置しました。スクロールすると、文字部分が白く、影の付いた ▲ ボタンがページの右下に表示されます。

『ページの先頭から 200px までは、スクロールボタンを表示しない』という処理の部分にのみ jQuery を使用しています。常に表示しておくのならば CSS のみで問題ありません( その場合は、A 要素に display:none は必要ありません )

CSS
#scroll_top {
	position: fixed;
	text-decoration: none;
	font-size: 40px;
	color: rgba(255,255,255,0.85);
	text-shadow: 1px 1px 2px #656a6f;
	right: 0.5%;
	bottom: 5rem;

}


A 要素

これは、</body> の直前に記述しています。
<a href="javascript:void(0);" id="scroll_top" onclick="window.scroll(0,0);" style="display:none;">▲</a>
※ CSS の記述を A 要素に全てインラインスタイルとして記述してもいいです。

jQuery 部分
$(function(){

	$(window).on("scroll",function(){
		var scroll = $("html").scrollTop();
		if ( scroll <= 200 && $("#scroll_top").css("display") != "none" ) {
			$("#scroll_top").css("display","none");
		}
		if ( scroll > 200 && $("#scroll_top").css("display") == "none" ) {
			$("#scroll_top").css("display","inline");
		}
	});

});

この jQuery では、A 要素のインラインスタイルである、display プロパティをフラグとして使用し、表示したり消したりするのは最低限の回数になるようにしています。なので、display:none は必ず インラインスタイル側で指定する必要があります。


【jQueryの最新記事】
posted by lightbox at 2018-01-09 20:19 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり