防止按钮在纯 JavaScript 中显示浏览器 URL 中的井号和 id 名称

Question

我单击 p 标记按钮调用 go-to-the-end，它会将我带到页面的某个部分，但它会更改 url。例如，在单击发生之前，浏览器 url 在我按下按钮后看起来像 www.example.com/test.html，它将浏览器 url 更改为 www.example.com/test.html#end I

不希望通过显示井号和 id 名称来更改我的网址 所以我基本上想按下按钮并且 url 没有改变，但它仍然把我带到页面上的某个位置，所以我怎么能用纯 JavaScript 做到这一点？

我在这个网站上找到了关于这个主题的帖子，但我找到的都是基于 jQuery 的。我需要一个纯 JavaScript 的示例。

这是我的代码

document.querySelector('#go-to-the-end').addEventListener('click',goToTheEnd);

function goToTheEnd(){

document.location = '#end';
  
}

#go-to-the-end{
  color: white;
  font-weight: bold;
  background-color: red;
  padding: 5px;
  display: inline-block;
  border-radius: 8px;
  cursor: pointer;
}

#random-info{
  width: 100px;
}

<p id='go-to-the-end'>Go to the end</p>

<p id='random-info'>
  Three years after the second season of Batman: The Animated Series ended production, the show was moved from Fox to The WB network, which was airing and producing Superman: The Animated Series. These shows were merged as part of an hour-long segment called The New Batman/Superman Adventures. The WB wanted more episodes of Batman, so 24 new episodes were produced, which featured a different format and more focus on Batman's supporting cast.

In addition to the network's demands, the producers decided to make the show match the graphic style of Superman, so all the characters and objects were redesigned as more "animation friendly" with fewer lines, usually referred to by the fans and creative staff as the "revamp" (or alternately, the "new look"). A similar graphic style was used in the rest of the DCAU later on.

The entire series was released on DVD as Batman: The Animated Series Volume Four (From The New Batman Adventures), most likely to establish the connection with the original series.
</p>

<p id='end'></p>

Answer 1

您可以在要滚动到的元素上调用scrollIntoView()，这不需要更改window.location：

document.querySelector('#go-to-the-end').addEventListener('click',goToTheEnd);

function goToTheEnd(){
  document.querySelector('#end').scrollIntoView();
}

#go-to-the-end{
  color: white;
  font-weight: bold;
  background-color: red;
  padding: 5px;
  display: inline-block;
  border-radius: 8px;
  cursor: pointer;
}

#random-info{
  width: 100px;
}

<p id='go-to-the-end'>Go to the end</p>

<p id='random-info'>
  Three years after the second season of Batman: The Animated Series ended production, the show was moved from Fox to The WB network, which was airing and producing Superman: The Animated Series. These shows were merged as part of an hour-long segment called The New Batman/Superman Adventures. The WB wanted more episodes of Batman, so 24 new episodes were produced, which featured a different format and more focus on Batman's supporting cast.

In addition to the network's demands, the producers decided to make the show match the graphic style of Superman, so all the characters and objects were redesigned as more "animation friendly" with fewer lines, usually referred to by the fans and creative staff as the "revamp" (or alternately, the "new look"). A similar graphic style was used in the rest of the DCAU later on.

The entire series was released on DVD as Batman: The Animated Series Volume Four (From The New Batman Adventures), most likely to establish the connection with the original series.
</p>

<p id='end'></p>