javascript 如何才能使一个按钮上的导航滚动到一个特定的点在网页上,但速记

rlcwz9us  于 2023-05-16  发布在  Java
关注(0)|答案(1)|浏览(89)

我为导航栏上的按钮编写了四个函数,这些按钮可以滚动到页面上的特定点

function scrollToTop() {
  var section = document.querySelector(".body");
  section.scrollIntoView({ behavior: "smooth" });
}

function scrollToAbout() {
  var section = document.querySelector(".about-me");
  section.scrollIntoView({ behavior: "smooth" });
}

function scrollToProjects() {
  var section = document.querySelector(".projects");
  section.scrollIntoView({ behavior: "smooth" });
}

function scrollToContact() {
  var section = document.querySelector(".footer");
  section.scrollIntoView({ behavior: "smooth" });
}

有什么办法可以让我写得更短吗?
谢谢你

htrmnn0y

htrmnn0y1#

如果你使用css类名作为一个变量,会有一个更短的方法。

function scrollTo(className) {
  document.querySelector(className).scrollIntoView({ behavior: "smooth" });  
}

然后你可以像这样调用函数:

<button onclick="scrollTo('.projects')">Projects</button>

相关问题