[解決済み] scrollIntoViewを固定位置のヘッダーで使用する

質問

ヘッダが以下のように設定されているサイトがあります。 position: fixed . あるページで、私は scrollIntoView(true) を使っています。私の問題は scrollIntoView が呼び出されたとき、要素がヘッダーの下に配置されることです。要素がヘッダーのすぐ下に表示されるようにするには、どのようにこれを修正すればよいですか？

私はBootstrapフレームワークを使用しており、ヘッダーのスタイルが navbar navbar-fixed-top .

どのように解決するのですか？

ちょっとハチャメチャですが、回避策を紹介します。

var node = 'select your element';
var yourHeight = 'height of your fixed header';

// scroll to your element
node.scrollIntoView(true);

// now account for fixed header
var scrolledY = window.scrollY;

if(scrolledY){
  window.scroll(0, scrolledY - yourHeight);
}

編集する

現代的な回避策としては、CSSの scroll-margin-top プロパティと :target セレクターと組み合わせて使用します。詳しく説明する。 https://www.bram.us/2020/03/01/prevent-content-from-being-hidden-underneath-a-fixed-header-by-using-scroll-margin-top/