javascript - 当用户单击按钮时，如何使我的页面向下滚动？

Question

<分区>

Answer 1

您正在寻找片段标识符。

添加 id属性到您要滚动到的部分。

示例:<section id="shop"> ... </section>

然后，使用 anchor <a>用 href 代替按钮属性。

示例:<a href="#shop">Shop</a>

简单的例子:

#shop {
  margin-top: 300vh;
  background-color: tomato;
  height: 100vh;
  position: relative;
}

#shop::after {
  content: 'Shop Content';
  position: absolute;
  color: white;
  font-size: 3em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<a href="#shop">Shop</a>

<section id="shop"></section>

如果需要平滑滚动， scrollIntoView 可以这样使用:

document.querySelector('#shopBtn').addEventListener('click', function() {

  document.querySelector('#shop').scrollIntoView({
    behavior: 'smooth'
  });

});

#shop {
  margin-top: 300vh;
  background-color: tomato;
  height: 100vh;
  position: relative;
}

#shop::after {
  content: 'Shop Content';
  position: absolute;
  color: white;
  font-size: 3em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

<button id="shopBtn">Shop</button>

<section id="shop"></section>