javascript - Jquery Accordion - 使点击的元素滚动到页面顶部

Question

我正在将此 Accordion 脚本用于常见问题解答页面:http://www.snyderplace.com/demos/accordion.html

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

理想情况下，当您单击它时，我希望将其放置在脚本将问题滚动到页面/视口(viewport)顶部的位置。如果有人知道要在脚本中调整什么，那就太棒了!

Answer 1

你可以尝试这样的事情。您不需要 Accordion 插件:

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

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。