Scroll-to-section at the correct page location

Is your scroll-to-section click scrolling to a point in your page that is above your targeted section?

Most often this is caused by the existence of lazy-loaded images above the point you are scrolling to.

This is a common problem in web page design, because;

The web browser cannot calculate the scroll-to position on the page until all of the images are loaded... but the images do not load until they are scrolled into view.

The video shows the problem and solution.

Solutions

There are 2;

1. Disable lazy-loading of images on the images above your scroll-to position.
2. Give every image element an explicit height, so that the browser can calculate the scroll-to position even without loading those images.

‍