javascript - 如何在不让整个浏览器跳下的情况下转到可滚动div中的 anchor 标记？

Question

我正在为客户构建一个简单的词汇表小部件，作为一个更大项目的一部分。词汇表的内容包含在一个可滚动的 div (overflow:auto) 中。每个字母都有一个与之关联的 anchor 标记(#a、#b、#c 等)。在可滚动的 div 上方是一个包含字母表中每个字母的 div。单击这些字母之一会将用户带到可滚动 div 中该字母的定义。这行得通，但一个意想不到的副作用是整个窗口跳转到 anchor ，这让用户感到困惑和恼火。

这是小部件，精简了一点，带有一堆 <br />让你明白我的意思。

http://www.nitrohandsome.com/clients/topics/glossary-widget/

我尝试了几个不同的 javascript 想法，这些想法是我从一些谷歌搜索中拼凑出来的，但没有任何效果，所以我只是摆脱了所有东西，除了实际的 go to anchor 代码(我是一个相当大的 JS 新手)。所以现在，单击任何字母都会执行此 javascript 函数，并将 anchor 标记传递给它:

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

我怎样才能做到这一点，这样整个窗口就不会在每次单击链接时跳转？

提前致谢!

Answer 1

如果您使用的是 jQuery，您可以尝试 scrollTo插入。此外，要仅编辑 哈希 部分或 URL，您可以这样做

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