2009-09-17 25 views
9

添加一个散列到URL而不滚动页面? 用JavaScript添加散列与JavaScript的网址,而无需滚动页面?

  1. 我打开网页
  2. 我向下滚动
  3. 我点击链接,增加了一个散列(也许用一个值#TEST)(例如:http://www.example.com/#test
  4. 的页面必须不能回滚到顶部。

这个怎么办?

说明: 只是检查是否有可能禁用移动,即使有一些标签与id =“test” 到目前为止返回false;可以正常工作(支持没有javascript的人),也可以避免在html中出现id,但它不会出现像数字一样的问题,比如1,2,3(它们不允许作为id)

所有的答案都很棒,没有什么新的或开创性的,没有解决方案如何打破默认功能,但它会。 :) 感谢您花时间回答。

+1

“#”具有真正的语义,即“此URI处资源的#identified部分”。你为什么试图打破这个标准的期望? – annakata 2009-09-17 16:39:05

+0

历史和后退按钮。我个人比较喜欢用传统的基于标准的方法来做这件事,但很多人都喜欢花哨的Ajax。之后(或同时)我发布了这个问题谷歌和异常艺术实现了这个“破”的方法,你可以看到当你搜索的东西:) – 2010-09-15 11:34:48

+0

现在做这个花哨的ajax页面加载的东西的新的最佳方式是使用[历史.push](https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history) – 2012-08-30 08:14:26

回答

17

任何不存在于页面上的散列都会给你这种行为。例如,此页面上的this link points to a non-existant hash。 (链接使用Chrome 2.0和IE 6进行测试(目前我唯一可用的浏览器)。)

因此,如果您的网址导致您进入页面顶部,请确保您没有任何内容其编号或名称是该地址的页面。

+0

经过这么多时间的思考,我意识到你绝对正确。 – 2010-03-26 11:14:55

0

每个浏览器都会将散列值解释为“转到该DOM ID”。你可以尝试两件事情我能想到的:

  1. 制作,增加了散列返回false,从而禁用需要浏览器来关注一下吧

  2. 添加DOM标签与行动您正在点击的位置添加散列的ID,以停止浏览器移动。但可能这不是你想要的,因为你正在为某些东西添加散列。

1

任的例子下面应该做你想要什么:

<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<a href="pleaseEnableJS.html" 
    onclick="window.location.hash = '#test1';return false;">Test 1</a> 
<a href="#test2">Test 2</a> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> 

如果没有与您的网页上id="test1"id="test2"<a name="test1"></a><a name="test2"></a>任何元素,它会滚动到该元素,否则它应该按照你的要求工作。

如果您的代码无法按预期工作,请edit your question,并包含一个HTML和JavaScript未按预期工作的小例子。

0

Welbog的答案正常,但在浏览器的地址栏中留下了#nonexistantanchor散列。

要做到这一点与jQuery你可以添加一个类的锚点,并使用prevent default方法来禁用导航和更改到网址。

<a href='#' class="nodefault">Clickable</a> 

<script> 
$("a.nodefault").click(function(event) { 
    event.preventDefault(); 
}); 
</script> 

当然,审美困境现在在于是否优雅的网址或无javascript解决方案是首选。

相关问题