jQuery samples - スクロールすると表示されるトップへ戻るボタン

このエントリーをはてなブックマークに追加

jQuery samples - スクロールすると表示されるトップへ戻るボタン

本エントリーは「to-R JavaScript Advent Calendar 2015」13日目のエントリー、今回からはjQuery samplesと題しましてjQueryを使った簡単なUIサンプルの解説を行っていきます。

初回はスクロールすると表示されるトップへ戻るボタン、以下のサンプルをちょっとスクロールすると左下にトップへ戻るボタンが表示されます。

See the Pen jQuery samples - スクロールすると表示されるトップへ戻るボタン by Kazuma Nishihata (@to-r) on CodePen.

では、HTMLとjQuery、CSSについて解説していきます。

HTML

HTMLは次のように大枠のdiv.pageTopとページトップへ戻るリンクで構成されています。

<div class="pageTop is-hide">
  <a href="#">ページトップへ戻る</a>
</div>

jQuery

jQueryでは現在のscrollイベントでスクロール位置( $(window).scrollTop() )が100pxより大きくなった場合にis-hideクラスを取り除くという処理を行なっています。

$(function(){
	var $window = $(window),
		$pageTop = $(".pageTop");
	$window.scroll(function(){
		if($window.scrollTop()>100){
			$pageTop.removeClass("is-hide");
		}else{
			$pageTop.addClass("is-hide");
		}
	});
});

is-hideクラスに関しては「jQuery 3.0時代のコーディングお作法 / show()/hide()編」を参考にしてください。

CSS

CSSでis-hideクラスがついてる場合は高さを0pxにして非表示になるようにしています。transitionによりis-hideが取り除かれた際にアニメーションしてheightが60pxになるように指定しています。

.pageTop{
	position:fixed;
	bottom:0px;
	left:0px;
	display:block;
	height:60px;
	width:60px;
	text-align:right;
	-webkit-transition:height 500ms;
	transition:height 500ms;
	overflow:hidden;
}
.pageTop.is-hide{
	-webkit-transition:height 500ms;
	transition:height 500ms;
	height:0px;
}
.pageTop a{
	position:relative;
	display:inline-block;
	overflow:hidden;
	color:transparent;
	width:50px;
	height:50px;
	border-radius:25px;
	background:#60ABB9;
}
.pageTop a::after{
	content:"";
	width:15px;
	height:15px;
	border-top:5px solid white;
	border-right:5px solid white;
	-ms-transform: rotate(315deg);
	-webkit-transform: rotate(315deg);
	transform: rotate(315deg);
	position: absolute;
	right:15px;
	top:50%;
	margin-top:-7px;
}

CSSに関しては「CSS3で実現するアローアイコン」や「CSS3アニメーションを利用したサンプル」なども参考にしてください。

次回は「overflow:scroll内をスムーズスクロール」の解説を行います。

スポンサードリンク

«ES5入門 - Object編 | メイン | jQuery samples - overflow:scroll内をスムーズスクロール»

このエントリーのトラックバックURL
コメント

こうしてます。

$pageTop.toggleClass("is-hide", $window.scrollTop()

場合によってはフッタに貼り付けたりリサイズに対応したりしてだんだんカオス化してきます。

投稿者:通りすがりですが | 2015年12月15日 10:34
コメントを投稿