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

Question

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

不希望我的 URL 通过显示哈希符号和 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>