如何在可滚动的div中跳转到锚点标签，而不会使整个浏览器页面跳转？

Question

我正在为客户的一个大型项目构建一个简单的词汇表小部件。词汇表的内容包含在一个可滚动的div（overflow:auto）中。每个字母都有一个关联的锚点标签(#a, #b, #c等)。在可滚动的div上方有一个包含字母表中每个字母的div。单击其中一个字母会将用户带到可滚动的div中该字母的定义处。这种方法虽然有效，但不良的副作用是整个窗口会跳到锚点处，这对用户来说很困惑和烦人。

这里是小部件的代码，稍微简化了一下，并加了一些<br />让你看到我的意思。 http://www.nitrohandsome.com/clients/topics/glossary-widget/ 我尝试了一些从Google上拼凑起来的不同JavaScript想法，但没有什么效果，所以我只保留了实际的转到锚点的代码（我是一个相当新手的JS）。因此，现在单击任何字母都会执行此JavaScript函数，并传递给它锚点标签。

    function jumpToAnchor(myAnchor) {
   window.location = String(window.location).replace(/\#.*$/, "") + myAnchor;
  }

我怎么才能做到在每次点击链接时窗口总体不会跳动呢？

提前感谢！

- Dave

---

我在Windows上的IE8、FF 3.5和Safari 4上测试了您的示例。我的屏幕高度为900像素。唯一注意到跳跃问题的时候是当我的浏览器高度小于您的小部件高度时，小部件被推出屏幕。这就是您所说的问题吗？ - jeremyosborne

没事，我明白你在说什么。空白页面让我有些困惑。 - jeremyosborne

Answer 1

如果您正在使用jQuery，可以尝试使用scrollTo插件。此外，要编辑仅限于hash部分或URL的内容，您只需执行以下操作：

function jumpToAnchor(myAnchor) {
   window.location.hash = myAnchor;
}

- Justin Johnson

---

我研究了scrollTo插件，但是在使用时遇到了麻烦。然而，该页面链接到http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12，一旦我将div替换为p，它就可以完美地工作了。谢谢！ - Dave

我第一次使用时也遇到了一些小问题，但很高兴你找到了解决方案。 - Justin Johnson

Answer 2

尝试使用IFrame代替Div或创建一个使用ScrollBy的特定函数。

- Leo

---

嘿，谢谢你的想法！它最初是一个iframe，但是有同样的问题。我会研究一下scrollby，但它只能传递数字值吗？客户将来可能想要添加或删除条款，所以如果链接硬编码到特定的y位置，它会遇到一些问题。有什么想法吗？ 再次感谢！ - Dave