2014年12月14日

ある程度スクロールしたらボタンがフェードインして現れるjQuery

jquery_fadein

このサイトでも採用していますが、クリックすると画面上部にスクロールするボタンを設置しているサイトは多いと思います。このボタンを初期表示では隠しておいて、ある程度スクロールしたらボタンがフェードインして表示されるという動作もよく見かけるものです。今回はその「ある程度スクロールしたらボタンがフェードインして現れるjQuery」をご紹介します。

HTMLの例

<div class="pagetop"><a href="javascript:void(0)"><img src="画像ファイルパス" alt=""></a></div>

jQueryの例

var topBtn = $('.pagetop');
topBtn.hide();
$(window).scroll(function () {
	if ($(this).scrollTop() > 800) {
		topBtn.fadeIn();
	} else {
		topBtn.fadeOut();
	}
});

CSSは「.pagetop」に「position: fixed; bottom: 10px; right: 10px;」みたいに指定している想定です。

ここで大事になるのはjQueryの「scrollTop()」です。これはウィンドウ最上部のスクロール位置を取得できる関数で、このjQueryの記述を直訳すると「ウィンドウがスクロールした時に、ウィンドウの最上部が800pxより下までスクロールされていれば.pagetopという要素をフェードインで表示し、そうでなければフェードアウトで隠す」という動作になります。

800という数値を小さくすれば、より少しのスクロールで.pagetopという要素がフェードインで表示される、という事になります。

応用すればいろんな場面で使える、ある程度スクロールしたらボタンがフェードインして現れるjQueryの記述例でした。

,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です