Using scrollIntoView with a fixed position header Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Using scrollIntoView with a fixed position header without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have a site with a header set to position: fixed. On one of my pages, I use scrollIntoView(true) on an element. My problem is that when scrollIntoView is called, the element gets positioned underneath the header. How would I fix this so that the element is shown just below the header?

I’m using the Bootstrap framework and the header is styled with navbar navbar-fixed-top.


It’s a bit hacky but here’s a workaround.

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

// scroll to your element

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

  window.scroll(0, scrolledY - yourHeight);


A modern workaround is to use the CSS scroll-margin-top property in combination with the :target selector. Described in detail:

We are here to answer your question about Using scrollIntoView with a fixed position header - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji