CODEWITHSUNDEEP
htmlanchor
Paulo Pinto
Paulo Pinto

Reputation: 11

Anchor links scrolling to wrong position

I'm troubleshooting this issue but can't find the answer. The anchor links on the homepage are not scrolling to the correct position in the new page (food-beverage).

http://goldforest.com (click any link in the square photos)

Strange thing is if you manually type an anchor link hash in the food-beverage page it will work fine. It seems to me that the anchor positions are loaded BEFORE the rest of the page which creates the positioning error.

Any ideas are appreciated.

Thank you

Upvotes: 0

Views: 1937

Answers (1)

Johannes
Johannes

Reputation: 67768

It seems that all those image carousels (some of them above the anchor) are still loaded after the page already jumped to the anchor. Since they have an initial height of 0, all elements below them are pushed down after their contant is loaded, which apparently is after the page jumps to the anchor.

To avoid that, you either would have to use some Javascript to delay the scrolling to anchor until all carousels have been fully loaded, or you could define height settings for those carousel containers - either for the class .food-beverage-container or separate settings for each ID which has that class. Since they are responsive, that's tricky - use vw values for the heigth (which are a percentage of the width, which probably remains a consistent in relation when zoomed)

Upvotes: 1

Related Questions