スムーススクロールを改造してヘッダーがFixしてても使えるようにする

仕事でWEBサイトを作成していると、かなりの確率で上へ戻る系のボタンを作成します。

アンカーで上まで戻すのですが、デフォルトのままだと一瞬でスクロールが移動してしまい、ページ遷移したのか何なのかわからなかったりします。

これだといわゆるユーザビリティーが悪い状態になりますのでJAVASCRIPTを使って、ボタンを押すと一定の時間をかけて上へスルスル〜と戻す。いわゆるスムーススクロール機能をほぼ確実に実装します。

検索すれば色々なサイトでソースが公開されてますのでそれをコピーして使用すればいいのですが、最近は高確率でヘッダーをFIXします。

アンカーで飛んだ先の上の方がヘッダーで隠れてしまう…という困ったは簡単に解消できます。

スムーススクロールでよく見るのがこれですね。

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

これをちょっと改造して、.headerの高さを取得してその分戻す処理を追加します。

$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var headerH = $(".header").height();
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top - headerH;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

変更したのは4行目を追加したのと、7行目の最後です。

4行目ではクラス名headerの高さを取得しています。

7行目ではFixしているheaderがかぶらないように、移動距離を減らしています。

環境に合わせて$(“.header”)のクラス名を変えてお使い下さい。
本当によく使うんですよね。

一応JSを改造しないでも出来るやり方もあります。

アンカーで飛ばす個所にpadding-topでヘッダー分のパディングを空ける事が出来るようでしたらpaddingを取ります。

ただ私の経験上ではpaddingで調整出来るデザインが来ることは少ないので、JSを改造して使うのが手っ取り早いかと思います。