便利帳

自分用備忘録。誰かの役に立てたら幸いです。

HTML/CSS・jQuery:ページ内リンクをスムーススクロールで移動する

ページ内にリンクを設定する際にスムーススクロールで移動する方法です。

jQueryを使用します。

HTML/CSS


HTML

<div class="header">
   ヘッダーがはいります
</div>
<div id="content">
    <a href="#link">CONTENT</a>
</div>
CSS
#content{
  padding-top: 100px;
}

#link {
   margin-top:-100px;
}
jQuery
$(function () {
 $('a[href^=#]').click(function(){
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
     $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
   });
});


一つ注意が必要なのはヘッダーを下記のように fixed にしている場合

CSS
.header {
    width: 100%;
    min-width: 960px;
    height: 100px;
    position: fixed;
    left:0;
    top:0;
    z-index: 10;
}

ページトップからの高さで移動してしまうので、
移動後ヘッダーの後ろに隠れてしいます。
ですので下記のように jQueryを書けば解決します。

jQuery
$(function () {
 var headerHight = 100; //下げたい高さ=ヘッダーの高さ
 $('a[href^=#]').click(function(){
     var href= $(this).attr("href");
       var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top-headerHight; //上記で設定した高さほど下げる処理
     $("html, body").animate({scrollTop:position}, 550, "swing");
        return false;
   });
});