jQuery

【TOPへ戻る】jQueryでスムーススクロールの実装方法を解説

jQueryのアニメーションでページに動きをだすといえば、スムーススクロール

内部リンクをクリックした時に、アニメーションをつけながら移動する動きをします。

スムーススクロールで移動しつつ、要素がフワッと登場してきたら、かっこいいですよね。Progateで学習したあとだと、すんなりと実装できたのでまずはProgateがおすすめです。

今回は、それぞれにスムーススクロールをつけていきたいと思います。

グローバルメニューのリンク

TOPへ戻るボタン

1.グローバルメニューのリンク

グローバルメニューのリンクをクリックするとスムーススクロールになるようにコーディングします。

まず、ページ内リンクを作るためには、

aタグの飛び先にidを指定して、<a hreh=”#id”>となるようにします。

これで、リンクをクリックした時に各セクションに飛ぶことができますが、この段階ではアニメーション無しなので、パッと切り替わるだけです。

ここにアニメーションをつけていきましょう。

ProgateのjQuery上級編で学んだ内容をそのまま使います。

$("header a").click(function(){
  var id = $(this).attr("href");
  var position = $(id).offset().top;
   $("html,body").animate({
    scrollTop:position 
    },"slow") 
});

 

解説していくと、

$("header a").click(function(){
ヘッダーのaをクリックした時

var id = $(this).attr("href");
クリックした要素のhref属性の値を取得(#id)

var position = $(id).offset().top;
#idのページ最上部からの距離を取得

 

$("html,body").animate({
scrollTop:position
},"slow")
});
ページ最上部からposition(#idと最上部からの距離)の距離を移動させる

こんな感じの処理になります。

scrollTopは基本的にこの書き方をすると覚えておくといいですね。

スクロールした時にずれる問題を解決する

ですが、このまま動作確認をすると、なぜかセクションの部分でぴったり止まってくれず、どうしてもずれてしまいます。

色々ググってみると。これは固定ヘッダーが原因でした。

最上部からの距離を測ってスクロールしますが、そもそもヘッダーが固定されているので、ヘッダーの高さ分を引いてあげないといけませんでした。

$('header a').click(function(){
  var id = $(this).attr('href');
  var headerHight = 100; 
  //ヘッダの高さ
    var position = $(id).offset() .top - 100;
    $('html,body').animate({
        scrollTop: position }, 'swing');
    }); 
});


なので、top-100としてヘッダーの高さを引いた分の距離を移動させることにします。

すると、ずれずに表示させることができます。

2.TOPへ戻るボタン

TOPへ戻るボタンは、HPcodeさんの記事から拝借しました。

<div class="floating">
 <a href="#">トップへ</a>
</div>

HTMLはdivで囲い、aでテキストをマークアップ

.floating {
  position: fixed;
  right: 8px;
  bottom: 8px;
  display: none;
}
.floating a {
  display: block;
  color: #fff;
  background: #000;
  padding: 8px;
  text-decoration: none;
  opacity: 0.6;
}
.floating a:hover { 
  opacity: 1; 
}

CSSで右下に固定しつつ、標準では非表示に

jQuery(window).on("scroll", function($) {
  if (jQuery(this).scrollTop() > 100) {
    jQuery('.floating').show();
    } else {
    jQuery('.floating').hide();
    }
  });
jQuery('.floating').click(function () {
  jQuery('body,html').animate({
  scrollTop: 0 
  }, 500);
  return false;
});
                      

スクロールして、指定した値を越えるとshow()で表示せるようなコードになっています。

Progateで基礎を学んだいるからこそ理解できる内容ですね。
これを実装したものがこちらです。

こういった細かな機能があるからこそ、Webサイトをストレスなく閲覧できるんですね。

スムーススクロールは、ほとんどのWebサイトで実装されているといってもおかしくないくらいよく見かけます。

完璧にできるくらい、やりこみたいと思います。