ある程度スクロールすると横からボタンがアニメーションしながら出現し、ボタンをクリックしページのトップに戻った後、画面横に引っ込むトップへ戻るボタンの実装方法

ページトップへスムーズに戻るボタンの解説ですが、今回はアニメーションの仕方が少し変わっています。

このボタンは[前回の記事]でも解説しましたが、今回解説するものはアニメーションが全く違い、アニメーションの終了時に特徴があります。

始めに完成デモをご覧ください。

完成デモ

ある程度スクロールすると、右からボタンが出現しボタンをクリックするとページのトップへ移動し、移動が完了するとボタンが右へ去っていくことが確認できます。

前回の記事との違いはボタンの出現・消滅の仕方であり、前回ではフェードイン・フェードアウトでしたが、今回はanimate関数によるrightプロパティの操作としています。

続いて各ソースコードの確認です。 始めにHTMLです。

HTML

HTMLはボタンのみです。

次にCSSです。

CSS

body {
  background: #dfdfdf;
  height: 5000px;
  width: 100%;
}

.backtotop {
  background: #aaa;
  border-radius: 50%;
  display: block;
  height: 44px;
  line-height: 44px;
  position: fixed;
  right: -60px;
  bottom: 10px;
  text-align: center;
  width: 44px;
}

i {
  color: #fff;
}

ボタンである.backtotopを、position:fixed;とright:-60px;、bottom:10px;と指定することで、画面右の外に隠し固定配置しています。

最後にjQueryです。

jQuery

$(function() {
  var topBtn = $('.backtotop');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      topBtn.stop().animate({
        'right': '10px'
      }, 200, 'linear');
    } else {
      topBtn.stop().animate({
        'right': '-60px'
      }, 200, 'linear');
    }
  });

  topBtn.bind('click', function(event) {
    event.preventDefault();
    $('body,html').stop().animate({
      'scrollTop': 0
    }, 1000, 'easeInQuart', function() {
      topBtn.stop().animate({
        'right': '-60px'
      }, 1000, 'easeInQuart');
    });
  });
});

スクロール量が300pxを超えると、animate関数によって右からボタンが出現します。300px未満となると元の位置に戻ります。

 $(window).scroll(function() {
    if ($(this).scrollTop() > 300) {
      topBtn.stop().animate({
        'right': '10px'
      }, 200, 'linear');
    } else {
      topBtn.stop().animate({
        'right': '-60px'
      }, 200, 'linear');
    }
  });

出現したボタンをクリックすると、'scrollTop': 0によってページの先頭に戻ります。

topBtn.bind('click', function(event) {
    event.preventDefault();
    $('body,html').stop().animate({
      'scrollTop': 0
    }, 1000, 'easeInQuart',

更に続けて処理を記述することで、ページの先頭に戻った後の処理を行なわせることができます。ここでは先程のスクロール量によるアニメーションと同じく、右へ去っていくような処理を施しています。

, function() {
      topBtn.stop().animate({
        'right': '-60px'
      }, 1000, 'easeInQuart');
    });

以上です。