香草 Javascript 没有执行我的平滑滚动 function

Question

I'm trying to implement smooth scroll on safari using Vanilla js.我正在尝试使用 Vanilla js 在 safari 上实现平滑滚动。 I followed every step on the documentation but it still does not work.我遵循了文档中的每一步，但它仍然无法正常工作。

This is my vanilla.js:这是我的 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:这是我布局的相关部分。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这是我的索引。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.它仍在 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>

Answer 1

try this solution for safari试试这个 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);
}

香草 Javascript 没有执行我的平滑滚动 function

问题描述

1 个解决方案

解决方案1
0 2020-05-13 02:59:58

香草 Javascript 没有执行我的平滑滚动 function

问题描述

1 个解决方案

解决方案1 0 2020-05-13 02:59:58

解决方案1
0 2020-05-13 02:59:58