Question

我将搜索功能与jQueryUI手风琴相结合。
搜索功能突出显示输入搜索词的每个部分的标题。我想找到一种方法让视口滚动到打开某个部分时找到的术语的第一个匹配项，从而使用户不必滚动浏览可能很长的内容。
每个突出显示的术语都包含在<span class="highlight">term</span>中。当我在其中找到一个术语时，我已经到了为每个部分标题添加onclick="jumpTo(chapter_number)"处理程序的地步。我只需要jumpTo函数的帮助。谢谢！

这是我的小提琴：http://jsfiddle.net/jameshuckabonetech/YsdDn/

P.S。小提琴很棒！第一个......

更新已完成的工作代码......

$( "#accordion" ).accordion(
{
    autoHeight: false, collapsible: true, active: false,
    activate:function(event, ui )
    {
        if ($(ui.newPanel).find('.highlight').length>0 && $("#jump-box").prop('checked') == true)
            $('html, body').animate(
            {
                scrollTop: $(ui.newPanel).find('.highlight').offset().top
            }
            , 2000);
    }
});

Answer 1

不要使用onclick使用accordion的activate事件。

$( "#accordion" ).accordion({
    autoHeight: false, collapsible: true, active: false,
    activate:function(event, ui ){
       if ($(ui.newPanel).find('.highlight').length>0)
          $('html, body').animate({
              scrollTop: $(ui.newPanel).find('.highlight').offset().top
              }, 2000);
    },
    beforeActivate:function(e,ui)
    {
        //if statement to check if you want to stop the accordion from opening
        e.preventDefault();
    }
});

使用jQuery scroll to element

中的滚动代码

jQuery Accordion - 在部分打开时滚动到具有特定类的元素

1 个答案: