如何在不改变URL栏的情况下添加HTML哈希链接...?
当我添加一个HTML链接到页面的特定部分:如何在不改变URL栏的情况下添加HTML哈希链接...?
<a href="#specific">test</a>
我注意到它的变化在地址栏中的网址。尽管我遇到过那些没有更新地址栏的链接。这怎么可能?
编辑:这可能是一个AJAX溶液中,他们度过,即使没有URL变化工作,因为如果我没有记错,页面没有加载,就直接去了目的地......
你不妨看一下jquery插件scrollTo。
而对于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/
这种方法有几点好点
- 只需将scrollLink类应用到您想要停止哈希出现的链接(很好很容易)
- 它使用正常的href,这也意味着即使javascript被禁用,链接仍然可以工作 - 这对于可访问性和可能的搜索引擎优化来说非常有用。
尼斯解决方案:) –
谢谢@ RichardJ.RossIII :-) –
亚历克斯这是非常出色的,非常感谢你! –
这是可能的使用javascript拦截点击事件,执行你自己的定制逻辑,然后取消导航事件,以便URL永不改变
您能否为我写这个解决方案的代码?请注意,不幸的是,我没有javascript知识,只有基本的HTML。 –
也许你可以尝试类似:window.scroll(0,150); 而不是“(0,150)”把你的目标的cooridnate。
你将不得不试验一下这个数字(这里显示为200)来让窗口正确对齐。
<a href="javascript:void(0);" onclick="window.scroll(0,200);">test</a>
如果我能正确对齐,所有浏览器的目标是否完全相同?正如我前面提到的,我对JavaScript并不是很有经验,因此不知道它在哪些规则下运行。 –
为什么不使用javascript,例如'window.scrollTo()'? –
我没有javascript的知识。你能否用一个有效的javascript例子来回答这个问题,我会对这个解决方案感到满意。 –
嗨Alehandro Darie,你能介绍一下为什么你不想改变URL栏的背景吗?就这样我们可以为你构建一个答案。谢谢。 –