jquery Accordion - 滚动到 li 标题

Question

Accordion 是使用列表 ul 和 li 而不是 div 构建的。 像大多数遇到此问题的人一样， Accordion 的某些部分中的内容相当长，当我触发其中一个大标题时，用户然后向下滚动以查看所有内容；下面是另一个要单击的 li 标题， Accordion 将关闭并打开最后一个标题。由于该部分中的内容也很大，用户只能盯着最后一个标题部分的底部，并且必须再次向上滚动。

在研究这个问题时，许多人建议使用 animate() 函数来重新关注 Accordion 的顶部。 我的问题是，因为我使用了开源代码，所以我不愿意对其进行太多编辑，我已经尝试过，但到目前为止没有成功。

有人可以帮忙吗？ [这里是jquery]

<小时/>

  (function(jQuery){
     jQuery.fn.extend({  
         accordion: function() {       
            return this.each(function() {

                var $ul = $(this);

                if($ul.data('accordiated'))
                    return false;

                $.each($ul.find('ul, li>div'), function(){
                    $(this).data('accordiated', true);
                    $(this).hide();
                });

                $.each($ul.find('a'), function(){
                    $(this).click(function(e){
                        activate(this);
                        return void(0);
                    });
                });

                var active = (location.hash)?$(this).find('a[href=' + location.hash + ']')[0]:'';

                if(active){
                    activate(active, 'toggle');
                    $(active).parents().show();
                }

                function activate(el,effect){
                    $(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('slow');
                    $(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
                }

            });
        } 
    });  
})(jQuery);

<小时/>

谢谢:)

[编辑]

我意识到您可能需要从我的 html 中触发 Accordion 的代码，它是::

<script type="text/javascript">
    $(document).ready(function () {
        $('ul').accordion();

    });
</script>

经过更多研究，有些人建议使用scrollTo()，所以我也尝试了这个::

        <script type="text/javascript">
        $(document).ready(function () {
            $('ul').accordion({
    change: function() {
        document.scrollTo(0, 0);
    }
});
        });
    </script>

但这也不起作用。 “叹息”..有谁知道我是否走在正确的轨道上？ 谢谢:)

Answer 1

我解决了这个问题:

这有点作弊，但这就是我所做的。

向我想要单击的每个 href 链接添加了一个滚动类 class="scroll"

将此脚本添加到页面(我将我的脚本放在名为#acc 的 div 下)

<script>$(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$("#acc").offset().top}, 500);
    });
});</script>

我对原来的唯一改变是#acc。这是我围绕 Accordion ul 类的 div 的名称。

这是我获取滚动代码 http://www.sycha.com/jquery-smooth-scrolling-internal-anchor-links 的地方

我希望这可以帮助其他正在寻找这个问题的人。 ^.^