jQuery手风琴-使Clicked元素滚动到页面顶部

Question

I am using this accordion script for an FAQ page: http://www.snyderplace.com/demos/accordion.html

It's great except for one problem which is especially evident on mobile devices. When you click on a question and it has a lot of content inside, it expands upwards off the screen, to where you have to scroll up to see the question and the beginning of the content.

Ideally I'd like to have it to where the script scrolls the question to the top of the page/viewport when you click on it. If anyone has an idea of what to tweak in the script that would be amazing!

Answer 1

You may try something like this. You don't need a plugin for an accordion:

Edited version with icons, default open, and touch enabled scroll to top

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

Add the class show to the one you want to open.

This could probably be written more efficiently as there's repeating code, but it should work.

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>

Note you will need to include jQuery in your code.