您可以通过JavaScript导航到浏览器中的锚点而不更新URL吗？

Question

JavaScript浏览器中是否有一种方法可以用来导航到页面上的锚点，但不更新URL片段？

例如，

HTML：

<h1 id="GettingStarted">Getting Started</h1>

JavaScript的：

var anchor = "Getting Started";
window.scrollToHTMLElement(anchor);

我不想更新URL片段。

之前的网址：

http://www.example.com/mypage.html

URL之后：

http://www.example.com/mypage.html

Answer 1

您可以使用scrollIntoView

document.getElementById('GettingStarted').scrollIntoView();

要么

document.getElementById('GettingStarted').scrollIntoView({
  behavior: 'smooth'
});

如果您想要平滑的动画。

查看这个小提琴作为示例。

Answer 2

正如乔纳森· scrollIntoView() Jonathan Heindl）指出的那样， scrollIntoView()可以解决您的问题。 更具体地讲，你将有你想要去一个元素，一个按钮（或任何你想要的，只是不是a标签）：

<h1 id="GettingStarted">Getting Started</h1>
<button type="button" id="trigger">Go</button>

然后是一些简单的javascript代码：

document.getElementById('trigger').addEventListener('click', function(){
    var anchor = document.getElementById('GettingStarted');
    anchor.scrollIntoView();
})

示例结果如下：

  document.getElementById('trigger').addEventListener('click', function(){ var anchor = document.getElementById('GettingStarted'); anchor.scrollIntoView(); }) 

 <h1 id="GettingStarted">Getting Started</h1> <div style="min-height: 150vh"></div> <button type="button" id="trigger">Go</button>