使用 JavaScript 将页面移动到由哈希定义的元素答案

【问题标题】：Move page to element defined by hash with JavaScript使用 JavaScript 将页面移动到由哈希定义的元素
【发布时间】：2013-01-11 08:15:11
【问题描述】：

我有一个嵌入了许多 Picasa 相册的页面。每个嵌入的相册都位于具有唯一 ID 的 <div> 内。

我希望能够将我的浏览器指向 /photos/#UNIQUEID 并让页面加载的焦点集中在正确的相册上。

如何使用 JavaScript 做到这一点？我的页面是：http://goo.gl/jDZIK

【问题讨论】：

你在哪里卡住了？
如果您想尝试 JavaScript 方法，window.location.hash 应该为您提供 URL 的“UNIQUEID”部分。如果您只想让页面前进到正确的专辑，请在每个专辑上方的 <h1> 标题元素中或周围放置一个 <a name="UNIQUEID"></a>，然后浏览器将为您完成剩下的工作。
把 / 拿出来。只需指向 /photos#UNIQUEID
究竟是什么不工作？或者，如果它更容易，你不喜欢的究竟发生了什么

【解决方案1】：

你为什么要使用 JavaScript 来做这件事？这已经是浏览器的默认行为了。

此链接将我向下滚动到使用我手头测试的那些浏览器的正确图像：火狐，歌剧，铬合金，互联网浏览器

所以你的问题的答案是：你不需要这样做，浏览器已经这样做了。如果您想在单击页面上的某些内容而不重新加载的同时向下滚动到图片，那就是另一回事了（在这件事上也是一个不同的问题）

【讨论】：

【解决方案2】：

window.location.href = '#HASH_NAME'?

已编辑。感谢 Cory 指出我明显的错误并对此感到抱歉！ ;) 干杯！

【讨论】：

-1：这设置散列，并且不回答问题。这将如何将焦点集中到页面的正确部分？
啊，对不起，你说得对！好的，那为什么不用 window.location.href = '#HASH_NAME' 来设置呢？它适用于 Chrome/Opera/IE7+/FireFox 我刚试过 ;)
由于技术上可行的方法，我删除了我的反对意见，尽管我并不提倡使用 JavaScript 作为实际解决方案。
@Cory，我同意尽可能不使用 JavaScript 来做这些事情，但它仍然是 OP 问题的正确答案，询问“我如何使用 JavaScript 来做到这一点？”。此外，例如，有时使用 JavaScript 可能是实现某种自动滚动到命名锚点的唯一方法。看不出有多大用处，但它仍然回答了这个问题。 ;) 干杯！

【解决方案3】：

在您的页面中，您有多个<h1> 标题元素，每个专辑上方都有一个。例如，如果您希望 URL ~/photos/#album1 跳转到标题为“Album 1”的区域，您只需稍微修改您的 HTML。这样做的“老式”方法是提供一个带有匹配name 属性的锚<a> 元素。所以，

<h1>Album 1</h1>

将更改为：

<a name="album1"></a><h1>Album 1</h1>

或者，现代浏览器会跳转到带有匹配哈希值的id 的任何元素，所以你可以简单地这样做：

<h1 id="album1">Album 1</h1>

浏览器应该负责其余的工作。只需确保您页面上的所有ids 都是独一无二的。仅供参考：我不喜欢跳转到 <div> 元素的想法，因为这样标题就会从视口中删除。

【讨论】：

【解决方案4】：

使用 jQuery，您可以指定当有人点击 div 时，您将其发送到您想要的位置。

$("div").click(function(){
  var UniqueID = $(this).prop('id');

  window.location.href = "www.servername.com/photos/#" + UniqueID;

});

【讨论】：