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;
}

从后到上的按钮故障。

理想情况下，我希望后退按钮可以平滑滚动以及页面上的其余内容（例如，导航中的锚定链接链接到同一页面的各个部分）。

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，我基本上使用了a（即另一个元素的href）捕获了所有id标签，并对其应用了smoothScrollCapture函数。

我认为，这比您进入HTML并为所有页面导航项提供新的唯一类要容易得多。

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

我还将所有初始化代码都包装在DOMContentLoaded事件侦听器中，以达到良好的效果。这些初始化措施包括获取window.scrollTo标记并将a应用于它们，以及将click事件添加到smoothScrollCapture并为scrollToTopButton和x传递0值，因为它仅位于页面顶部。

启用平滑滚动时，从上到下按钮有故障

1 个答案: