javascript - 启用平滑滚动时，返回顶部按钮会出现故障

Question

我在网上找到了这个返回顶部按钮的代码。它在网站上运行得非常好。

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

// Let's set up a function that shows our scroll-to-top button if we scroll beyond the height of the initial window.
const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;

  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 100) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

window.addEventListener("scroll", scrollFunc);

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;

  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

但每次我都添加平滑滚动来让用户体验更好:

html {
   scroll-behavior: smooth;
}

返回顶部按钮故障。

理想情况下，我希望返回顶部按钮和页面上的其他内容一样平滑滚动(例如，导航中链接到同一页面上的部分的 anchor 链接)。

Answer 1

如果您要顺利返回顶部，这应该会有所帮助。

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');
smoothScrollCapture = (x) => {
  event.preventDefault();
  var id = event.target.getAttribute('href').split("#")[1]
  var el = document.getElementById(id);
  var x = el.getBoundingClientRect().left
  var y = el.getBoundingClientRect().top
  smoothScrollFunc(x, y)
}

smoothScrollFunc = (x, y) => {
  event.preventDefault()
  window.scrollTo({
    top: y,
    left: x,
    behavior: 'smooth'
  });
}

window.addEventListener('DOMContentLoaded', () => {
  scrollToTopButton.addEventListener('click', () => {
    smoothScrollFunc(0, 0)
  })

  var aTags = document.getElementsByTagName('A')
  var myTags = []
  for (var i = 0; i < aTags.length; i++) {
    if (aTags[i].getAttribute("href").indexOf('#') === 0) {
      aTags[i].addEventListener('click', smoothScrollCapture);
    }
  }
})

window.addEventListener('scroll', () => {
  // Get the current scroll value
  let y = window.scrollY;
  if (y > 100) {
    scrollToTopButton.style.display = 'block'
  } else {
    scrollToTopButton.style.display = 'none'
  }
})

#js-top {
  position: fixed;
  /*OR WHATEVER YOU PREFER*/
  bottom: 10px;
  /*OR WHEREVER YOU PREFER*/
  left: 50%;
  /*OR WHEREVER YOU PREFER*/
  display: none;
}

<div style="height: 1000px;">
  <div class="nav-items">
    <a href="#paragraph1">Paragraph One</a>
    <a href="#paragraph2">Paragraph Two</a>
    <a href="#paragraph3">Paragraph Three</a>
    <a href="#paragraph4">Paragraph Four</a>
  </div>

  <div style="height: 100px;"></div>
  <p id="paragraph1">Here is the first paragraph!</p>
  <div style="height: 100px;"></div>
  <p id="paragraph2">Here is the second paragraph!</p>
  <div style="height: 100px;"></div>
  <p id="paragraph3">Here is the third paragraph!</p>
  <div style="height: 100px;"></div>
  <p id="paragraph4">Here is the fourth paragraph!</p>
</div>

<button id='js-top'>Scroll To Top</button>

编辑 我已经更新了代码片段。可能有一个仅使用 CSS 的解决方案，但我一直无法弄清楚。使用 JavaScript，我基本上捕获了所有带有 href 的 a 标签，该标签是另一个元素的 id 并应用 smoothScrollCapture 函数。

我认为这对您来说会更容易，而不是进入您的 HTML 并为所有页面导航项提供一个新的唯一类。

在 smoothScrollCapture 中，当您点击导航项(例如，paragraph3)时，您会从点击事件(目标的 href) 然后使用 getBoundingClientRect() 获取 top 和 left 值。由于您是在点击功能中执行此操作，因此它应该响应页面大小的调整。然后将这些值传递给 smoothScrollFunc，它只是将那些 x 和 y 值应用到 window.scrollTo 函数。

我还将所有初始化代码包装在 DOMContentLoaded 事件监听器中，以备不时之需。这些初始化措施包括获取 a 标签并将 smoothScrollCapture 应用于它们，以及将点击事件添加到 scrollToTopButton 并为 传递 0 >x 和 y 值，因为它只是转到页面顶部。