从一页平滑滚动到另一页

Question

我的网站包含以下部分：

• 首页
• 我们做什么
• 我们的故事
• 设计
• 联系

我在首页上滚动顺畅。

我们的工作和我们的故事是我主页的一部分，在那里可以滚动，但是当我在上时如何使它起作用设计或联系页面？

这是我的JavaScript代码：

let smoothScroll = (targetEl) => {
  const targetDistance = targetEl.offsetTop;

  window.scrollTo({
    left: 0,
    top: targetDistance,
    behavior: "smooth"
  });
}

const wwd = document.getElementById("wwd");
const ourstory = document.getElementById("story");

const secondpage = document.getElementById("second-page");
const thirdpage = document.getElementById("third-page");

wwd.addEventListener("click", function(event) {
  event.preventDefault();
  smoothScroll(secondpage);
});

ourstory.addEventListener("click", function(event) {
  event.preventDefault();
  smoothScroll(thirdpage);
});

var backToTop = document.getElementById("back-top");

let back = () => {
  if (window.scrollY > 700) {
    backToTop.classList.remove("hid");
    backToTop.classList.add("backtotop");
  } else {
    backToTop.classList.add("hid");
    backToTop.classList.remove("backtotop");
  }
}

window.onscroll = function() {
  back();
}

现在在我的联系页面上，我添加了以下链接：

<li><a id="home" href="index.html">home</a></li>
<li><a id="wwd" href="index.html#second-page">what we do</a></li>
<li><a id="story" href="index.html#third-page">our story</a></li>
<li><a id="designpage" href="/design.html">design</a></li>
<li><a id="contactpage" href="#">contact</a></li>

我在做什么错？我也尝试过使用index.html#secondpage，但这也不起作用。