title: Lazy loading conflicting with ScrollTo anchor to ID scroll - Stops halfway through the page
body: <p>I have a scrollTo function on my page where when you click on a specific button you scroll to a section with a unique ID.</p>
  <p>The problem is I am using lazy loading for the images on my website so, this will cause the ScrollTo to stop halfway through the page because of the images which are lazy-loaded.</p>
  <p>After all, images are loaded and I click again on the button it works just fine.</p>
  <p>My lazy load code:</p>
  <pre><code>(() =&gt; {
      const runLazy = () =&gt; {
          let images = [...document.querySelectorAll('[data-lazy]')];
  
          const settings = {
              rootMargin: '0px',
              threshold: 0.02
          };
  
          let observer = new IntersectionObserver((imageEntites) =&gt; {
              imageEntites.forEach((image) =&gt; {
                  if (image.isIntersecting) {
                      observer.unobserve(image.target);
                      image.target.src = image.target.dataset.lazy;
                      image.target.onload = () =&gt;
                          image.target.classList.add('loaded');
                  }
              });
          }, settings);
  
          images.forEach((image) =&gt; observer.observe(image));
      };
  
      runLazy();
  
  })();
  </code></pre>
  <p>My scroll to code:</p>
  <pre><code>(() =&gt; {
      document.querySelectorAll('a[href^=&quot;#&quot;]').forEach((elem) =&gt; {
          elem.addEventListener('click', (e) =&gt; {
              e.preventDefault();
              let block = document.querySelector(elem.getAttribute('href')),
                  offset = elem.dataset.offset
                      ? parseInt(elem.dataset.offset)
                      : 0,
                  bodyOffset = document.body.getBoundingClientRect().top;
              window.scrollTo({
                  top: block.getBoundingClientRect().top - bodyOffset + offset,
                  behavior: 'smooth'
              });
          });
      });
  })();
  </code></pre>
  <p>Is there a way to fix this?</p>