javascript - 如果单击上一页上的按钮，则自动滚动

Question

假设页面(页面 A)上有两个按钮(按钮 1 和按钮 2)。这两个按钮在单击时会导向相同的外部页面(页面 B)。如何使按钮 1 在单击时指向外部页面 B 的顶部，而按钮 2 会自动使页面向下滚动到页面的某个区域。

我假设示例代码看起来像这样:

<div id="b1" class="button"> </div> <div id="b2" class="button"> </div>

在 javascript 函数的外部页面上:

function initPage() {
 if(scrollTo1k == true)
  {
    body.animate({scrollTop: 1000}, 1000);
  }
}

编辑:我现在可以让电脑打开一个新页面到想要的位置，但是打开页面时的滚动效果是不存在的。

Answer 1

可以考虑使用一些<a>标签

这样，你的第一个按钮就可以像

<a href="targe-page-url">

第二个按钮是

<a href="targe-page-url#section-id-to-reach">

这将使用 HTML 书签链接 W3C Sample of Bookmark link这将连接到像 <div id="section-id-to-reach"> 这样的 div因此跳转到所需区域由浏览器直接处理

然后，滚动到目标不需要任何 Javascript。滚动效果可以通过将此 CSS 属性添加到您的页面来实现

body {
    scroll-behavior: smooth;
}