用香草 javascript 制作滚动 function

Question

我有一个带有固定导航栏菜单的 web。

我想滚动 function 到特定元素，所以如果单击菜单，它应该滚动到该元素。

实际上，当我使用 scrollToView() 时它正在工作，但是因为 scrollToView() 会将元素滚动到 0 的顶部，所以一些元素位于导航栏后面。

如何指定元素的顶部，使元素在导航栏下方滚动。

Answer 1

在现代浏览器上，您只需使用scroll-margin-top属性和指向锚点的链接即可获得与 CSS 相同的行为。

当您单击链接时，页面将滚动到#section-1块，但由于scroll-margin-top属性，您将仅在滚动时在元素上方定义一些边距，因此该部分将在固定下方可见header。 当然这需要提前知道固定元素的高度。

 html { scroll-behavior: smooth; --headerheight: 80px; } header { position: fixed; top: 0; width: 100%; height: var(--headerheight); /* eg 80px */ background: #9bc; } section { /* eg 85px */ scroll-margin-top: calc(var(--headerheight) + 5px); height: 100vh; color: #333; } header + section { padding-top: calc(var(--headerheight) + 5px); }

 <main> <header>Fixed Header</header> <section id="home"> <a href="#section-1">Scroll to section 1</a> </section> <section id="section-1" > section 1 <br/> <a href="#home">Scroll up</a> </section> </main>

Answer 2

您可以逐步执行此操作：

1. 找到要滚动到视图中的元素
2. 从顶部计算元素的滚动 position
3. 计算导航栏的高度
4. 滚动到所需的 position

.

const el = document.getElementById("idOfTheElement"); // step 1
const elFromTop = el.offsetTop; // step 2
const navBarHeight = 60; // step 3 (considering it is of fixed height)
window.scrollTo(0, elFromTop - navBarHeight); // step 4

在这里，我认为导航栏的高度是固定的。 如果导航栏的高度是动态的，则必须使用el.offsetHeight计算高度。

window.scrollTo将滚动没有任何 animation 的元素。 对于平滑滚动使用：

el.scrollTo({
  top: x,
  left: y,
  behavior: "smooth"
});

但上述function存在浏览器不兼容问题。 我通常做的是创建一个自定义 function 并使用它：

function smoothScroll(x, y, el = window) {
  try {
    el.scrollTo({
      top: x,
      left: y,
      behavior: "smooth"
    });
  } catch (e) {
    el.scrollTo(x, y);
  }
}