Question

我正在尝试使用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);
}

这是我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>

这是我的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>

它仍然在Safari上突然滚动。预先感谢

编辑：这是仅用于测试的模板，不起作用。

<!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

尝试使用该解决方案进行野生动物园

(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无法执行我的平滑滚动功能

1 个答案: