Question

在没有滚动页面的情况下向网址添加哈希值？用javascript

我打开页面
我向下滚动
我点击添加哈希值的链接（可能带有值#test）（例如：http://www.example.com/#test）
页面不得回滚到顶部。

怎么办呢？

请注意：只是检查是否有可能禁用移动，即使有一些标签id =“test” 到目前为止返回虚假;工作正常（支持没有javascript的人），也避免在html中存在id，但是对于像数字这样的东西不是问题，比如1,2,3（不管怎么说它们都不允许作为id） / p>

所有的答案都很棒，没有新的或突破性的，也没有关于如何打破默认功能的解决方案，但它会做到。 :) 谢谢你花时间回答。

Answer 1

页面上没有的任何哈希应该会给你这种行为。例如，此页面上的this link points to a non-existant hash。（链接测试使用Chrome 2.0和IE 6（目前我可以使用的唯一浏览器）。）

因此，如果您的网址导致您转到页面顶部，请确保网页上没有任何内容，其ID或名称就是该地址。

Answer 2

以下任何一个例子都应该做你想要的：

<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无法正常使用的示例。

Answer 3

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

执行添加哈希返回false的操作，从而禁止浏览器查找
添加一个DOM标记，其中包含您正在添加的哈希的ID，以便停止浏览器移动。但可能这不是你想要的，因为你正在添加哈希值。

Answer 4

Welbog的答案很好，但在浏览器的地址栏中保留了#nonexistantanchor哈希值。

要使用jQuery执行此操作，您可以向锚添加一个类，并使用prevent default方法禁用导航和更改URL。

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

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

当然，现在的美学困境是优雅网址或无javascript解决方案是首选。

使用javascript添加哈希到url而不滚动页面？

4 个答案: