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

jQueryを使ってページの先頭へのスムーズにスクロールするボタンと、スクロールに合わせて表示の作成
このエントリーをはてなブックマークに追加
PR

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のアニメーションと組み合わせるといろいろな見せ方も出来るので

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

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)