Question

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

例如，

HTML：

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

JavaScript：

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

我不想更新URL片段。

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'
});

如果您想要平滑的动画。

请查看此fiddle作为示例。

Answer 2

正如乔纳森·海因德尔（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>

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

2 个答案: