如何添加 HTML 哈希链接而不改变 URL 栏...？

当我将 HTML 链接添加到页面的特定部分时：

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

我注意到它改变了地址栏上的 URL。尽管我遇到过以这种方式链接的网站，但地址栏没有更新。这怎么可能？

编辑：这可能是一个 AJAX 解决方案，如果他们在不更改 URL 的情况下使其工作，就好像我没记错一样，页面没有重新加载，它直接到达目的地......

您可能希望查看 jquery 插件，scrollTo。

http://jquery.com http://jquery.com

还有几个scrollTo 的链接

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

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

你可以这样做：

The 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();

    });

});

javascript 的作用是，当单击具有“.scrollLink”类的链接时，将页面向下滚动到具有相同 ID 的元素，就像单击的特定链接的 href 一样。然后 e.preventDefault() 会像正常的哈希链接一样停止它的工作，并停止它出现在 URL 栏中。

这是一个适合您的工作示例：http://jsfiddle.net/alexkey/c3jsY/7/ http://jsfiddle.net/alexkey/c3jsY/7/

并且版本不在框架集中，因此您可以看到 URL 没有更改：

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

这种方法有几个优点

1. 只需将scrollLink类应用到您想要阻止散列出现的链接（又好又简单）
2. 它使用正常的 href，这也意味着即使禁用 javascript，链接仍然可以工作 - 有利于可访问性和可能的​​搜索引擎优化。