リンクをクリックするとページの上から目的のコンテンツにスクロールして移動したりページ下まで行ってボタンをクリックするとページ上までスクロールで移動して戻るという挙動はよく見ると思います。
このようにパッと指定の位置に移動するのではなくスクロールによって目的の位置までアニメーションのように移動させる方法をスムーススクロールと呼びます。
ですがスムーススクロールはプラグインとか使わないと難しいと思っている人も意外と多いようですがそれほど難しくなくスムーススクロールの挙動を作ることができます。
今回はプラグインを使わずにスムーススクロールをさせる方法を紹介します。
jQueryを使えば簡単にスムーズスクロールが作れる
jQuery
スムーススクロールさせるjQueryの記述は下記になります。
//スムーズスクロール
jQuery(function(){
jQuery('a[href^="#"]').click(function() {
var scroll_speed = 500;
var href= jQuery(this).attr('href');
var target = jQuery(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
jQuery('body,html').animate({scrollTop:position}, scroll_speed, 'swing');
return false;
});
});サンプル
解説
スムーススクロールのスピードを設定
変数にスムーススクロールのスピードを指定します。ミリ秒で指定してください。
var scroll_speed = 500;クリックされたアンカーの値を取得
var href= jQuery(this).attr('href');移動先を取得する
下記の記述で移動先を数値で取得します。
var position = target.offset().top;スムーススクロールのアニメーション
jQuery('body,html').animate({scrollTop:position}, scroll_speed, 'swing');animateメソッドを使うことでアニメーションを実装することができます。
上記で取得した移動先の位置、スムーススクロールのスピードなどが入り目的の位置までアニメーションで移動します。
cssのみでスムーススクロールにさせる方法
cssのみでスムーススクロールにさせる方法もあります。
jQueryのように細かい設定はできませんが簡単に再現できます。
cssのみでスムーススクロールにする方法は下記の記事で紹介しています。
参考の記事：【jsを使わない】cssのみでスムーススクロールさせる方法
コメント