Jquery 手风琴 - 使点击的元素滚动到页面顶部

Question

我正在将此手风琴脚本用于常见问题页面：http://www.snyderplace.com/demos/accordion.html

除了一个在移动设备上尤为明显的问题外，一切都很好。当您点击一个问题并且里面有很多内容时，它会向上扩展到屏幕外，您必须向上滚动才能看到问题和内容的开头。

理想情况下，当您单击它时，我希望将它放到脚本将问题滚动到 page/viewport 顶部的位置。如果有人知道要在脚本中进行哪些调整，那就太棒了！

Answer 1

你可以尝试这样的事情。您不需要手风琴插件：

带图标的编辑版本，默认打开，并启用触摸滚动到顶部

https://jsfiddle.net/07fdq3t1/10/

将 class 节目添加到您要打开的节目中。

由于有重复代码，这可能会更有效地编写，但它应该可以工作。

jQuery

$(document).ready(function() {
    $('.accordion').click(function(){
        if($(this).next('.container').is(':visible')) {
            $(this).removeClass('show');
            $(this).next('.container').slideUp();
        }
        else {
            $('.accordion').find('.container:visible').slideUp();
            $('.accordion').removeClass('show');
            $(this).addClass('show');
            $(this).next('.container').slideDown();
        }         
    });
    $('.accordion').on( "touchstart", function(){
        if($(this).next('.container').is(':visible')) {
            $(this).removeClass('show');
            $(this).next('.container').slideUp();
        }
        else {
            $('.accordion').find('.container:visible').slideUp();
            $('.accordion').removeClass('show');
            $(this).addClass('show');
            $(this).next('.container').slideDown();
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, 200);
        } 
    });
});

HTML

<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>
<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>
<div class="accordion show">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>
<div class="accordion">Heading<span></span></div>
    <div class="container">
        <div class="content">
            <div>Sample Content</div>
            <p>Content here....</p>
        </div>
    </div>

请注意，您需要在代码中包含 jQuery。

Jquery 手风琴 - 使点击的元素滚动到页面顶部

Jquery Accordion - Make Clicked element scroll to top of page

javascript

jquery

scroll

accordion