jQueryを使ってページの先頭へのスムーズにスクロールするボタンと、スクロールに合わせて表示を作る

jQueryを使って

ある程度スクロールしたら、ページ先頭へ戻るボタンが出てきて

クリックすると、スムーズにスクロールしてページの先頭まで移動するボタンを作ります

jQueryを使ってスムーズにページの先頭へ移動するボタンをある程度スクロールしてから表示するコードを作る

内容は2つに分かれていて

ボタンをクリックするとページの先頭へスムーズにスクロールするボタンを作
スクロールの量に合わせてボタンの表示、非表示を操作する

この2つの動作を作ることで、実装します

また、ボタンの表示、非表示にCSSでアニメーションを加えるとフェードイン、スライドインでの表示・非表示に出来ます

STEP 1 jQueryを読み込む

まずはjQueryを読み込みます、読み込みの位置はjQueryのコードを書く前ならどこでもOK

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

jQueryをダウンロードして設置して読み込む場合は

こちらからjQueryをダウンロードして、サーバーに設置して読み込んでください

jQueryのダウンロード

STEP 2 ボタンをクリックするとページの先頭へスムーズにスクロールするボタンを作る

次に、ページの先頭へ戻るボタンを作ります

これは、適当に作ってもOKです divをボタンにしてもいいし、aタグをボタンにしてもOK

それらを特定できるように class名をつければ良いです、今回は class名は scroll-top です

/*ボタンをクリックしたときの動作 ページのトップへアニメーション付きで動く*/
$(".scroll-top").bind('click',function(){
  $('html,body').animate({scrollTop : 0},1000);
      return false;
});

2行目の .scroll-top これでクラス名を指定しています

このクラスを対象に動作をさせます

2行目の後半の部分は、クリックをトリガーとして何らかを実行するという意味です

3行目ではクリックされて、実行されるものが書かれています

今回では、HTML要素のhtmlタグ、bodyタグの始まりへ 1秒かけてページの先頭へ移動するというものになっています

4行目は aタグにリンクがあった時に無効化するものです

5行目でコードを閉じで完成

これで、指定した要素をクリックすると

ページの先頭へスムーズにスクロールしていきます

STEP 3 スクロールの量に合わせてボタンの表示・非表示を操作する

次は、ページをスクロールしてある程度スクロールしてから

ページの先頭へ戻るボタン(要素)を表示、非表示するコードです

/*スクロールされるたびに感知*/
$(window).bind('scroll load',function () {
  
  /*ページの上部へのボタンの表示。非表示の条件*/
  if ($(window).scrollTop() >= 600) {
    /*600px以上スクロールした場合*/
    $(".scroll-top").addClass("scroll-top-on");
    
  } else {
    /*600px未満のスクロールの場合*/
    $(".scroll-top").removeClass("scroll-top-on");
  }
});

まず、2行目でページが読み込まれた時と、スクロールがされた時に動作するようになっています

5行目～7行目でもし、スクロールした量が600pxを超えている場合に実行する内容＝ 600px 以上

9行目～11行目でそうではなかった場合に実行する内容となっています＝ 600px 未満

つまり 5～7行目で表示、9～11行目で非表示となるようにしてやれば良い

今回は、classの追加で表示、classの削除で非表示となるようにした

STEP 2 で作ったボタンの class名に予め display:none;をつけておき

.scroll-top-on という class を追加してやると表示になるように display:block;(使う要素によって変化)と上書きになるようにして表示されるようになる

非表示に戻すときは .scroll-top-on という class を削除してやれば元の非表示に戻る仕組み

これで、スクロールの量によって表示非表示の動作が完成しました

STEP 4 ボタンの表示・非表示にアニメーションをつける

STEP 3 では display:; を使って表示・非表示となるようにしましたが

opacity を使うとフェードインに出来ます

transform: translateX(); を使うと、横からのスライドインにすることが出来ます

フェードイン・フェードアウトにする場合

.scroll-top {
  opacity: 0;
  -webkit-transition: 0.5s;
  transition: 0.5s; }

.scroll-top-on {
  opacity: 1; }

スライドイン・スライドアウトにする場合

.scroll-top {
  -webkit-transform: translateX(-500px);
  -ms-transform: translateX(-500px);
  transform: translateX(-500px);
  -webkit-transition: 0.5s;
  transition: 0.5s; }

.scroll-top-on {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0); }

基本的な部分だけにしました

あとは、好きに装飾してやると良いかと思います

位置は position fixed を使って指定してやると良いかと思います

jQuery部分のコードをまとめたもの

最後に、jQueryのコードをまとめたもの

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  /*スクロールされるたびに感知*/
  $(window).bind('scroll load',function () {
    
    /*ページの上部へのボタンの表示。非表示の条件*/
    if ($(window).scrollTop() >= 600) {
      /*600px以上スクロールした場合*/
      $(".scroll-top").addClass("scroll-top-on");
      
    } else {
      /*600px未満のスクロールの場合*/
      $(".scroll-top").removeClass("scroll-top-on");
    }
  });
  
  /*ボタンをクリックしたときの動作 ページのトップへアニメーション付きで動く*/
  $(".scroll-top").bind('click',function(){
    $('html,body').animate({scrollTop : 0},1000);
        return false;
  });
</script>

jQueryを使えば、簡単に短いコードで実装できます

またCSSのアニメーションと組み合わせるといろいろな見せ方も出来るので

オリジナルな、ページの先頭へのボタンを作る際には試してみてください