Adding an "Offset" value to the "scrollTo" element

[JonathanLangton1]

Describe the new feature or change to an existing feature you'd like to see

A clear and concise description of what you want to happen.

If a website has a fixed header of let's say 300px, and the user clicks on a scrollTo link, the header will cover up the first part of the content. Using the "scrollTo" element is great, however the only position values are "top", "middle" and "bottom". It would be very useful if there was also an "offset" value. This would create a simple way of fixing this issue.

Describe alternatives you've considered

Provide a clear and concise description of any alternative solutions or features you've considered.

Solution: Making a div element a set height above your scroll to div.
This solution takes time and is repetitive (you would need to do this for each scrollTo section).

[caroqliu]

Thanks for filing this issue! I can definitely see the use case you describe as being valuable, however a value like this runs the risk of being imprecise across user viewing contexts (say, when a header may not be fixed-height) or worse, abused (to displace the reader as they are interacting with the page). Would it be possible, since you know the height of your header, to target a lower portion of the page, i.e. "center" instead of "top" to account for the additional header above?

[JonathanLangton1]

Thank you for your reply :)

If I targeted the center, half of the content gets lost off the top of the page as it scrolls past the top. For now, creating a div and setting the negative value of the height of the fixed header works fine. I just thought that this may be a useful feature for others who also use a fixed header.

The tag doesn't have to have the offset in px. If someone uses 10vh for their fixed header, then they should be able to use that value within the "offset" element.

I'm really enjoying AMP so far and I'm currently in the process of changing my website to it :)

[gtamborero]

Hi! I think @JonathanLangton1 idea is a good one.
I have been solving this problem using an invisible with a negative top and position absolute but it's not too pretty...

<a id="smoothLinkID" style="top:-150px; width:100%; float:left; position:absolute; display:block;"></a>

As @caroqliu said, if mobile and desktop sticky headers have different height sizes this can be another problem to solve.