Javascript 当单击容器中的链接时，滚动至粘贴默认位置

我使用jqueryui制作了一个选项卡式内容，并使用在固定位置制作了选项卡选择器。与Yahoo使用的方式类似，对于单击的每个选项卡选择器链接，它会将滚动页面触发到选择器的默认位置，以便从一开始就显示选项卡内容

代码段：

---

感谢您的帮助。：）

首先-html元素应该有唯一的ID。我已经用expando属性

data pos

替换了

href

，它有一个jQuery选择器用于滚动到元素。所以

看起来像

使用词缀和scrollspy更新：

使用具有滚动效果的选项卡更新：
您可能没有注意到您的解决方案使JQuery UI选项卡无法工作。主要原因是将href替换为data-pos。@IhabAbdel-Rahim我刚刚更新了我的答案。它有一个简化的CSS，所以你可以根据自己的意愿扩展它。粘贴和滚动间谍也在工作。刚刚检查过。您所做的只是标准的scrollspy，这并不是什么新鲜事，因为bootstrap已经有了它。@IhabAbdel Rahim bootstrap的scrollspy需要
.nav
元素。所以我实现了自己的。顺便说一句，这个变体是否符合您的需要？使用scrollspy而禁用选项卡主要不是一个解决方案。如果我没有标签，我可以很容易地做scrollspy。
<div class="news-tickers scrollspy" id="scrollToHere">

<ul class="catselector affix-top" data-spy="affix">
    <li><a id="foo" href="#cat1">Category 1</a></li>
    <li><a id="foo" href="#cat2">Category 2</a></li>
    <li><a id="foo" href="#cat3">Category 3</a></li>
</ul>

<div id="cat1">cat1 content</div>
<div id="cat2">cat2 content</div>
<div id="cat3">cat3 content</div>

</div>

$('#foo').click(function () {
    $('html,body').animate({
        scrollTop: $("#scrollToHere").offset().top
    }, 800);
});

$('.foo').click(function () {
    var posElement = $($(this).data("pos"));
    $('html,body').animate({
        scrollTop: posElement.offset().top
    }, 800);
});