SQLの窓

2019年05月07日


jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )

このブログで実装しているものを jQuery に置き換えたものです。リンクは、スクロールしていない先頭では表示されませんが、少しスクロールすると表示されます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){

	// ページ右下固定位置のリンク
	var scroll_top = $("<a id='scroll_top'>▲</a>")
	scroll_top.prop("href","javascript:void(0)");
	scroll_top.css({ 
		"position": "fixed",
		"opacity": "0.5",
		"text-decoration": "none",
		"font-size" : "40px",
		"color" : "rgba(255,255,255,0.85)",
		"text-shadow" : "1px 1px 2px #656a6f",
		"right" : "3%",
		"bottom" : "5rem",
		"display" : "none"
	});

	// クリックした時の処理
	scroll_top.on("click", function(){
		window.scroll(0,0);
	});

	// ページの最後に追加
	$("body").append( scroll_top );

	// スクロールが無い先頭部分では表示しない
	$(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","");
		}
	});	

});
</script>







タグ:スクロール
【jQueryの最新記事】
posted by lightbox at 2019-05-07 22:01 | jQuery | このブログの読者になる | 更新情報をチェックする
container 終わり

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

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり