ScrollToElement - lack of precision

ScrollToElement - lack of precision

  

hi there,

I tried the ScrollToElement pattern and use price id for the widgetid:

Unfortunately, when load the page, it does not point exactly to the price widget:


regards,

Batik

Solution

Hi Batik.

Technically, the position is correct, but the field is being hidden under the fixed header that you have. I never found a satisfying solution to this problem, but I guess you could try a solution described by Karl Horky in here: https://stackoverflow.com/questions/13614112/using-scrollintoview-with-a-fixed-position-header (which is not the accepted answer). It consists of adding a padding-top and cancelling it with a negative margin-top, so that the element has an invisible padding to make up for the header height.

Demo here: https://work.karlhorky.com/frontend-tricks/anchors-with-fixed-header/index.html

Solution