The scrollTo Method
The technique described on this page is NOT working - and is in progress
When looking for a way to position to an element on a page by id with an offset I came across this method.
My goal here was to overcome the fact that unless I place section of a page after a div of a fixed height of 40px, the hyperlink to it will result in the text being displayed under the fixed header of the page. This is okay if the link is to a section on the same page that is normally spaced by 40px, but there are circumstances where I wanted to refer to ids that do no have the 40px offset.
I want to develop a way of displaying the destination element with an offset.x
The MSN example
window.scrollTo({
top: 100,
left: 100,
behavior: 'smooth'
});
Text before the offset.
The element that I want to position the page.
At the moment I have just a hyperlink to this element from a menu option in the top menu. I will probably have to fire a function from the button using the code above.
The goal here is to be able to navigate to another page with an offset to an anchor on a page. At the moment I have put spacers between sections on pages and links to these sections rely on the fact that I have 40px space to allow an offset from the top menu (which is fixed).
An example of the current situation can be seen with this link to my portfolio template page.
In this example there needs to be enough text to the bottom of the page for the section lable to appear below the top menu.
In most cases this is not a problem - to see the text hidden under the top menu scroll the page up.