通过命名锚点导航长选项卡面板时，jQuery 选项卡会滚动到视图之外答案

【问题标题】：jQuery tabs scroll out of view when navigating long tab panels via named anchors通过命名锚点导航长选项卡面板时，jQuery 选项卡会滚动到视图之外
【发布时间】：2011-12-08 20:55:30
【问题描述】：

看看这个小提琴：

http://jsfiddle.net/contendia/GBTAS/

这个想法是通过仅在 js 可以运行时创建选项卡来保持页面对非 js 用户友好。否则，我只想将页面显示为一堆 div。根据选项卡的数量，选项卡的列表是完全自动化的，每个选项卡都根据相应的 div id 属性命名。

一切运行良好，但现在我正在尝试重新处理单击事件以更普遍地导航选项卡。之前，我只是在其中一个列表项选项卡 (li) 上查找单击事件，然后运行必要的代码来更改选项卡。

但是现在我想让这个函数更通用，这样当用户点击哈希值等于选项卡 ID 之一的任何锚点时，它就可以工作，而不必定位实际的选项卡。我不确定如何在锚点中定位哈希并针对选项卡 ID 对其进行测试。我在 FF 和 IE 中拥有的功能可用于单击选项卡和单击锚链接（例如，<a href="#tab1">Tab 1</a>）。但是，如果选项卡比视口长，选项卡顶部会滚动到窗口顶部，导致选项卡链接消失。用户必须手动将选项卡链接滚动回视图以导航到另一个选项卡。我尝试 .scrollTo() 将页面移回原位，但没有成功。

这只是 .scrollTo 的一个问题，还是我的点击功能都错了？

将不胜感激任何想法。奖金，如果它会动画会很棒。

http://jsfiddle.net/contendia/GBTAS/

【问题讨论】：

这里有同样的问题，使用带有标签的哈希，因此后退按钮适用于标签内的向下钻取等。哈希似乎是导致它的原因。我在选项卡选择上手动添加了哈希，因此我可以按照您的建议将滚动位置同时移回顶部（选项卡所在的位置）。你对此有结论吗？

标签： jquery hash tabs scroll scrolltop

【解决方案1】：

好的，给你..我听说这对你不起作用，但对我来说非常有效。这是点击选项卡链接时触发的点击处理程序，它添加了哈希值，如您所见。没有“scrollTo()”，滚动就像你描述的那样......有了它，问题就消失了。然后我得出结论，由于某种原因设置 href 会滚动浏览器视口。

j('#tabs ul li a').click(function () {
    location.hash = j(this).attr('href');
    window.scrollTo(0, 0);
}); // Add click handler to set # in address bar

【讨论】：

我可以看到你打算用这个去哪里，但是为什么在你不需要的时候在地址栏中设置哈希呢？即，如果您只是在 href 中添加目标，例如 href="#tab2"，它会自行设置。此外，window.scrollTo(0,0) 并没有完全满足我的需要。它不是将选项卡拉到视图中，而是将整个页面拉到顶部。所以，我尝试了$("div.autotab-container").scrollTo(0, 0);，它有点工作，但仍将选项卡推到视口上方。此外，在链接中包含哈希不会使后退按钮对我有用。地址栏中的哈希值发生了变化，但选项卡什么也不做。有什么建议吗？