ページ内リンクのスクロール位置をずらす

ページ内リンクのスクロール位置をずらす。

JavaScript

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
  // #で始まるアンカーをクリックした場合に処理
  $('a[href^=#]').click(function(){
    // 移動先を300px下にずらす
    var adjust = 300;
    // スクロールの速度
    var speed = 400; // ミリ秒
    // アンカーの値取得
    var href= $(this).attr("href");
    // 移動先を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    // 移動先を調整
    var position = target.offset().top + adjust;
    // スムーススクロール
    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});
</script>

スクロール位置をずらさない（通常）

▽jquery-1.11.3.min.js使用

See the Pen
ページ内リンク、するするとスクロール by 125naroom (@125naroom)
on CodePen.

スクロール位置を50px上にずらす

▽jquery-1.11.3.min.js使用

See the Pen
ページ内リンクのスクロール位置を50px上にずらす by 125naroom (@125naroom)
on CodePen.

スクロール位置を50px下にずらす

▽jquery-1.11.3.min.js使用

See the Pen
ページ内リンクのスクロール位置を50px下にずらす by 125naroom (@125naroom)
on CodePen.