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

Question

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

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

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

score 3 · Accepted Answer

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

这个链接让我使用我手头测试的浏览器向下滚动到正确的图像：Firefox、Opera、Chrome、Internet Explorer

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

score 1 · Accepted Answer

window.location.href = '#HASH_NAME'?

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

score 0 · Accepted Answer

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

<h1>Album 1</h1>

将更改为：

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

id或者，现代浏览器将跳转到与哈希值匹配的任何元素，因此您可以简单地执行以下操作：

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

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

score -1 · Accepted Answer

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

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

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

});

4 回答 4