如何在没有整个浏览器跳下的情况下将标签锚定在可滚动的div中？ [英] How to go to anchor tag in scrollable div without having the whole browser jump down?

问题描述

我正在构建一个简单的术语表小部件，作为客户端大型项目的一部分。术语表的内容包含在可滚动的div（overflow：auto）中。每个字母都有一个与其关联的锚标记（#a，＃b，#c等）。滚动div上方是一个包含字母表中每个字母的div。点击这些字母中的一个将用户放到可滚动div中的那个字母的定义中。这是有效的，但意想不到的副作用是整个窗口跳到锚点，这对用户来说是令人困惑和烦人的。

这里是小部件，剥离下来一点点，并与一堆< br /> 的让你明白我的意思。

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

我尝试了一些不同的javascript想法，我从一些谷歌搜索拼凑在一起，但没有任何工作，所以我只是摆脱了一切，但实际去锚定代码（我是一个很大的JS新手）。所以现在，单击任何字母执行此JavaScript函数，并将锚标记传递给它：

  function jumpToAnchor（ myAnchor）{
 window.location = String（window.location）.replace（/ \＃。* $ /，）+ myAnchor; 
 
 $ / code> 

我该如何解决这个问题，所以整个窗口不会每次都跳转一个链接被点击？

提前致谢！ 您使用的是jQuery，您可以尝试 scrollTo 插件。另外，要编辑 hash 部分或URL，您可以执行

  function jumpToAnchor myAnchor）{
 window.location.hash = myAnchor; 
} 
  

I'm building a simple glossary widget as part of a larger project for a client. The content of the glossary is enclosed within a scrollable div (overflow:auto). Each letter has an anchor tag associated with it (#a, #b, #c, etc). Above the scrollable div is a div which contains every letter of the alphabet. Clicking on one of these letters takes the user down to that letter's definitions in the scrollable div. This works, but an unintended side effect is that the entire window jumps down to the anchor, which is confusing and annoying to the user.

Here is the widget, stripped down a bit and with a bunch of <br />'s to let you see what I mean.

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

I had tried a few different javascript ideas I cobbled together from some Googling, but nothing was working, so i just got rid of everything but the actual go to anchor code (I'm a pretty big JS newbie). So right now, clicking on any of the letters executes this javascript function, with the anchor tag passed to it:

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

How can I pull this off so the overall window doesn't jump each time a link is clicked?

Thanks in advance!

解决方案

If you're using jQuery, you can try the scrollTo plugin. Also, to edit just the hash portion or the URL, you can just do

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

这篇关于如何在没有整个浏览器跳下的情况下将标签锚定在可滚动的div中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！