固定ヘッダのアンカーズレ対応

お母ちゃん　 2017.12.4　

Web / css / ページ内リンク / 固定ヘッダ

facebook

Home > Web > 固定ヘッダのアンカーズレ対応

１．

  var pageHash = location.hash
  if(pageHash) {
    let _h = $('header').innerHeight();
    var position = $(pageHash).offset().top - _h ;
    $('html, body').animate({scrollTop:position}, 500, 'swing');
  }

1

2

3

4

5

6

var pageHash = location.hash

if(pageHash) {

let _h = $('header').innerHeight();

var position = $(pageHash).offset().top - _h ;

$('html, body').animate({scrollTop:position}, 500, 'swing');

}

２．

window.onload = function() {
  var id = window.location.hash.replace('#','');
  if(id){
    var element = document.getElementById(id);
    element.scrollIntoView(); 
    window.scrollBy(0,-50); // ヘッダの高さをマイナスで指定
  }
};

1

2

3

4

5

6

7

8

window.onload = function() {

var id = window.location.hash.replace('#','');

if(id){

var element = document.getElementById(id);

element.scrollIntoView();

window.scrollBy(0,-50); // ヘッダの高さをマイナスで指定

}

};

１でうまくいかなかったページで、、（zoomされていたり色々調整されていた）

コメントはこちらからコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

GO TO TOP
キュー