2019.07.26: jQuery

スライダ―を入れるとアンカーリンクがずれる

ページ内のアンカーリンクだと問題ありませんが、別ページからのアンカーリンクだと、アンカーの場所がおかしくなってしまうことがあります。

これは、スライダーで使っているjQueryやcssが読み込まれる前にアンカーリンクが着地するためです。

先にロードしてJavascriptやCSSを読み込ませた後にアンカーリンクに着地するようにしてあげると解決されます。

<script>
$(window).on('load', function() {
    var hash = window.location.hash;
    var position = $(hash).offset().top;
    function scroll(position){
      $('html, body').animate({
        scrollTop : position
      }, 100);
    }
    scroll(position);
  });
</script>

$(window).on('load', function() {

var hash = window.location.hash;

var position = $(hash).offset().top;

function scroll(position){

$('html, body').animate({

scrollTop : position

}, 100);

}

scroll(position);

});

</script>

ここからはじめよう

スライダ―を入れるとアンカーリンクがずれる

お勧めの記事

過去の記事