position:fixed によるアンカーリンクへの位置ずれ対策

１．

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

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); // ヘッダの高さをマイナスで指定
  }
};

window.onload = function() {

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

if(id){

var element = document.getElementById(id);

element.scrollIntoView();

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

}

};

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

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

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

Related Posts

innerText の 空判定が出来ない → textContent で取得する必要あり

動的追加要素の読み込み完了後にイベント追加

PhoneGap を Android 実機でデバッグ

横幅いっぱいmp4のレスポンシブ背景（キービジュアルなど）

HTML と CSS だけでラジオボタンの画像選択 & 選択状態

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

innerText の空判定が出来ない → textContent で取得する必要あり

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