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内をスムーズスクロール»