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

Jquery Accordion - Make Clicked element scroll to top of page

本文关键字：顶部 滚动 元素 Accordion- Jquery      更新时间：2023-09-26

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

除了一个在移动设备上特别明显的问题外，它非常棒。当你点击一个问题，里面有很多内容时，它会从屏幕上向上展开，直到你必须向上滚动才能看到问题和内容的开头。

理想情况下，当你点击它时，我想把它放在脚本将问题滚动到页面/视口顶部的位置。如果有人知道在脚本中调整什么，那将是惊人的！

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

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

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

将课堂表演添加到要打开的节目中。

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

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。

相关文章：