Vanilla Javascript not executing my smooth scroll function

Question

I'm trying to implement smooth scroll on safari using Vanilla js. I followed every step on the documentation but it still does not work.

This is my vanilla.js:

(function() {
  scrollTo();
})();

function scrollTo() {
  const links = document.querySelectorAll('.scroll');
  links.forEach(each => (each.onclick = scrollAnchors));
}

function scrollAnchors(e, respond = null) {
  const distanceToTop = el => Math.floor(el.getBoundingClientRect().top);
  e.preventDefault();
  var targetID = (respond) ? respond.getAttribute('href') : this.getAttribute('href');
  const targetAnchor = document.querySelector(targetID);
  if (!targetAnchor) return;
  const originalTop = distanceToTop(targetAnchor);
  window.scrollBy({ top: originalTop, left: 0, behavior: 'smooth' });
  const checkIfDone = setInterval(function() {
    const atBottom = window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 2;
    if (distanceToTop(targetAnchor) === 0 || atBottom) {
      targetAnchor.tabIndex = '-1';
      targetAnchor.focus();
      window.history.pushState('', '', targetID);
      clearInterval(checkIfDone);
    }
  }, 100);
}

This is the relevant part of my layout.html:

<head>
  <script src="static/vanilla.js"></script>
  <li class="nav-item">
      <a data-scroll class="scroll nav-link" href="#bazinga">¿Como funciona?</a>
  </li>
</head>

And this is my index.html

<section id="bazinga" align="left" class="features" id="features">
    <div class="container">
      <div class="section-heading text-center">
        <h2>Funciones ilimitadas, información ilimitada</h2>
        <p class="text-muted">Descubre la magia que hay detrás de una simple pulsera tyveck</p>
<hr width="15%">
</section>

It's still scrolling abruptly on Safari. Thanks in advance

Edit: This is a template only for testing and does not work.

<!DOCTYPE html>
<html>
<head>
  <script src="/static/vanilla.js"></script>
</head>
<body>
  <a class="scroll" href="#bazinga">¿Como funciona?</a>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<p>My first paragraph.</p>
<div id=bazinga class="container">
  <p>Bazinga</p>
</div>

</body>
</html>

could you add the whole HTML file to test it – fadi omar May 13 '20 at 02:01 — fadi omar, May 13 '20 at 02:01

score 0 · Answer 1 · answered May 13 '20 at 02:59

try this solution for safari

(function() {
  scrollTo();
})();

function scrollTo() {
  const links = document.querySelectorAll('.scroll');
  links.forEach(each => (each.onclick = scrollAnchors));
}

function scrollAnchors(e, respond = null) {
  e.preventDefault();
  const time = 1000; // you can change this value

  const distanceToTop = el => Math.floor(el.getBoundingClientRect().top);
  var targetID = (respond) ? respond.getAttribute('href') : this.getAttribute('href');
  const targetAnchor = document.querySelector(targetID);
  if (!targetAnchor) return;
  var eTop = distanceToTop(targetAnchor);
  var eAmt = eTop / 100;
  var curTime = 0;
  while (curTime <= time) {
    window.setTimeout(scrollSmoth, curTime, eAmt);
    curTime += time / 100;
  }
}

function scrollSmoth(eAmt) {
      window.scrollBy(0, eAmt);
}

this is my reference for the solution https://stackoverflow.com/questions/51229742/javascript-window-scroll-behavior-smooth-not-working-in-safari you can check it out if others solutions suit your case like installing a package or something — fadi omar, May 13 '20 at 03:22

Vanilla Javascript not executing my smooth scroll function

1 Answers1