如何在不改变URL栏的情况下添加HTML哈希链接...？ [英] How do I add a HTML hash link without it altering the URL bar...?

问题描述

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

 < a href =＃specific >试验< / A> 
  

我注意到它改变了地址栏的URL。尽管我遇到过那些没有更新地址栏的链接。这可能是什么？

编辑：它可能是一个AJAX解决方案，他们让它工作没有URL更改，如果我没有记错，页面没有重新加载，它直接到达目的地......

解决方案

您可能希望查看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>点击我滚动< / a> 
< div class =gap>一个很大的差距< / div> 
< h1 id =scrollToMe>我应该在网址< / 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不会更改：

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

这种方法有几点好处

1. 只需将scrollLink类应用到您希望阻止哈希出现的链接（好和简单）


2. 它使用正常的href，这也意味着即使javascript被禁用，链接仍然可以正常工作 - 这对于可访问性和可能的​​搜索引擎优化来说非常有用。

When I add a HTML link to a specific part of the page:

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

I noticed that it changes the URL at the address bar. Although I have come across websites where they link that way without the address bar being updated. How is this possible?

EDIT: It might be an AJAX solution were they make it work without URL change, as if I remember correctly, the page didn't reload, it went directly to the destination...

解决方案

You may wish to look at the jquery plugin, scrollTo.

http://jquery.com

And a couple of links for scrollTo

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

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

You can do something like this:

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>

The javascript (jquery and the scrollto plugin)

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

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

    });

});

What the javascript does, is when ever a link is clicked that has the class ".scrollLink", scroll the page down to the element that has the same ID, as the href for the particular link clicked. Then the e.preventDefault() stops it working like the normal hash link and stops it appearing in the URL bar.

Here is a working example for you: http://jsfiddle.net/alexkey/c3jsY/7/

And a version not in a frameset, so you can see that the URL doesn't change:

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

This approach has a couple of good points

1. Simply apply the scrollLink class to links you want to stop the hash appearing (nice and easy)
2. It uses the normal href, which also means the links will still work even if javascript is disabled - good for accessibility and probably search engine optimisation to.

这篇关于如何在不改变URL栏的情况下添加HTML哈希链接...？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！