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

Question

我点击 p 标签按钮调用 go-to-the-end，它会将我带到页面的某个部分，但它会更改 url。例如，在单击发生之前，浏览器网址看起来像这样 www.example.com/test.html 在我按下按钮后，它将浏览器网址更改为 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>