如何添加一个HTML哈希链接而不改变URL地址栏？

Question

当我在页面的特定部分添加一个 HTML 链接时：

<a href="#specific">test</a>

我注意到它会改变地址栏中的URL。虽然我遇到过一些网站，它们在没有更新地址栏的情况下以这种方式链接。这是怎么做到的呢？

编辑：这可能是一个AJAX解决方案，他们使其在不更改URL的情况下工作，如果我记得正确，页面没有重新加载，直接进入目标...

- Alehandro Darie

---

为什么不使用JavaScript，例如window.scrollTo()？ - Richard J. Ross III

我没有JavaScript知识。你能否提供一个可行的JavaScript示例来回答我的问题，我会对这个解决方案感到满意。 - Alehandro Darie

嗨，Alehandro Darie，您能否简要介绍一下为什么您不想更改URL栏的背景？这样我们就可以为您构建一个答案。谢谢。 - Alex KeySmith

@AlexKey 谢谢您的回复。原因是，如果访问者重新加载页面或将其加入书签，它将始终转到特定目标。问题在于，我开发了一种单页类型的作品集设计，访问者浏览网站时很可能会将该网站加入书签，这意味着当他们将其加入书签并返回该网站时，他们将会落在页面的随机部分（而不是顶部）。希望这有任何意义... - Alehandro Darie

很酷，谢谢Alehandro，我现在正在为你准备回复。 - Alex KeySmith

Answer 1

你可能希望查看jQuery插件scrollTo。

http://jquery.com

还有几个与scrollTo相关的链接

http://demos.flesler.com/jquery/scrollTo/

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

你可以像这样做：

HTML

<a href="#scrollToMe" class="scrollLink">click me to scroll</a>
<div class="gap">a big gap</div>
<h1 id="scrollToMe">I should scroll to here without a # in the URL</h1>

JavaScript（jQuery和scrollto插件）

$(document).ready(function() {
    $(".scrollLink").click(function(e) {

        $.scrollTo($(this).attr("href"));    
        e.preventDefault();

    });

});

当点击具有类“.scrollLink”的链接时，javascript会将页面滚动到具有与特定链接的href相同ID的元素。然后e.preventDefault()会阻止它像普通哈希链接一样工作，并防止它出现在URL栏中。

这里是一个可行的示例：http://jsfiddle.net/alexkey/c3jsY/7/ 还有一个不在框架集中的版本，因此您可以看到URL没有更改：

http://fiddle.jshell.net/alexkey/c3jsY/7/show/light/

这种方法有几个优点：

1. 只需将scrollLink类应用于要停止出现哈希的链接即可（非常简单）
2. 它使用正常的href，这也意味着即使禁用javascript，链接仍将正常工作-对于可访问性和可能的搜索引擎优化来说很好。

- Alex KeySmith

---

很高兴能帮助@AlehandroDarie，我很乐意提供帮助。 :-) - Alex KeySmith

Answer 2

可以使用JavaScript拦截点击事件，执行自定义逻辑，然后取消导航事件，使URL永远不会改变。

- Tom Carver

---

请问您能否为我编写这个解决方案的代码？请注意，我很遗憾没有 JavaScript 知识，只有相对基础的 HTML。 - Alehandro Darie

Answer 3

也许你可以尝试这样做：window.scroll(0,150); 将"(0,150)"替换为你的目标坐标即可。

- Oli

Answer 4

你可以使用内联代码：

<a href="javascript:void(0);" onclick="document.getElementById(\'bookmark\').scrollIntoView();"> link text </a>
<div id="bookmark">Jump to here</div>

- Henry

Answer 5

你需要尝试不同的数字（这里显示为200）来使窗口对齐。

<a href="javascript:void(0);" onclick="window.scroll(0,200);">test</a>

- enduro

---

如果我将其正确对齐，那么目标在所有浏览器上都会完全相同吗？正如我之前提到的，我对JavaScript并不是很有经验，因此不知道它遵循哪些规则。 - Alehandro Darie