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