Question

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

代码段：http://jsfiddle.net/rpgrhhnt/1/

<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>

使用JQuery scrollTop，当其他选项卡处于活动状态时，我设法让第一个选择器链接（类别1）的进程正常工作。其他选择器链接无需滚动即可在点击时启动！

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

感谢任何帮助。：）

Answer 1

首先 - html元素应该有唯一的ID。我已将expand href替换为具有滚动到元素的jQuery选择器的expando属性data-pos。所以<a id="foo" href="#cat1">Category 1</a>现在看起来像<a class="foo" data-pos="#cat1">Category 1</a>，并将JS的一部分转换为：

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

您可以在jsFiddle

中查看这些操作的结果使用词缀和scrollspy

更新：jsFiddle

使用滚动效果标签

更新：jsFiddle

单击容器中的链接时，滚动到附加默认位置

1 个答案: