如何在不改变URL栏的情况下添加HTML哈希链接...？

Question

当我向页面的特定部分添加HTML链接时:

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

我注意到它更改了地址栏中的URL.虽然我遇到了网站,他们以这种方式链接,而不更新地址栏.这怎么可能？

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

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

    });

});

javascript的作用是,当点击具有".scrollLink"类的链接时,将页面向下滚动到具有相同ID的元素,如点击的特定链接的href.然后e.preventDefault()停止它像普通哈希链接一样工作并停止它出现在URL栏中.

以下是您的工作示例:http://jsfiddle.net/alexkey/c3jsY/7/

并且版本不在框架集中,因此您可以看到URL不会更改:

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

这种方法有几个好处

1. 只需将scrollLink类应用于您想要停止显示哈希的链接(简单易用)
2. 它使用正常的href,这也意味着即使javascript被禁用,链接仍然可以工作 - 这对于可访问性和搜索引擎优化来说都很有用.