jquery 手风琴 - 滚动到 li 标题答案

【问题标题】：jquery accordion - scroll to li headerjquery 手风琴 - 滚动到 li 标题
【发布时间】：2012-10-06 20:57:35
【问题描述】：

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

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

有人可以帮忙吗？ [这里是 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 中触发手风琴的代码：：

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

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

【问题讨论】：

标签： jquery header html-lists accordion scrollto

【解决方案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。那是我在手风琴 ul 类周围的 div 的名称。

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

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

【讨论】：