Question

我正在使用Bootstrap创建一个响应式网站，它包含带有大量文本的手风琴，当您读到底部并单击下一个手风琴时，大量文本被折叠，我被留在底部页面。

我从Bootstrap accordion scroll to top of active panel heading找到了这个有用的代码，但它滚动到所有手风琴的顶部，而不是特定的手风琴。

$(function () {
        $('#accordion').on('shown.bs.collapse', function (e) {
            var offset = $('.panel.panel-default > .panel-collapse.in').offset();
            if(offset) {
                $('html,body').animate({
                    scrollTop: $('.panel-heading').offset().top -20
                }, 500); 
            }
        }); 
    });

如何修改此代码以滚动到当前活动的手风琴的顶部？

HTML;

  <div class="panel-group custom-padding no-sides" id="accordion">                
                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Short synopsis <i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>
                            <div id="collapse1" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <p id="game-deck"></p>
                                </div>
                            </div>
                        </div>                       
                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Concepts <i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>
                            <div id="collapse2" class="panel-collapse collapse">
                                <div class="panel-body">
                                    <ul class="whatever" id="game-concepts"></ul>
                                </div>
                            </div>
                        </div>                      
                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Themes <i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>    
                            <div id="collapse3" class="panel-collapse collapse">
                                <div class="panel-body" id="game-themes"></div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Notable locations<i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>    
                            <div id="collapse4" class="panel-collapse collapse">
                                <div class="panel-body" id="game-locations"></div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Notable characters<i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>    
                            <div id="collapse5" class="panel-collapse collapse">
                                <div class="panel-body" id="game-characters"></div>
                            </div>
                        </div>

                        <div class="panel panel-default">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapse6">
                                <div class="panel-heading custom-padding">
                                    <h4 class="panel-title text-uppercase">Full description <i class="fa fa-chevron-down pull-right"></i></h4>
                                </div>
                            </a>    
                            <div id="collapse6" class="panel-collapse collapse">
                                <div class="panel-body" id="game-description"></div>
                            </div>
                        </div>

Answer 1

您可以通过获取＆＃39;目标元素＆＃39;的顶部来设置滚动动画。然后在身体上调用动画..

$('html, body').animate({
    scrollTop: $("#target-element").offset().top
}, 1000);

将其修改为类似的内容将有助于您实现目标

$('.panel-collapse').on('shown.bs.collapse', function (e) {
    var $panel = $(this).closest('.panel');
    $('html,body').animate({
        scrollTop: $panel.offset().top
    }, 500); 
});

来源：http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

互补小提琴：https://jsfiddle.net/hjugdwbp/

编辑：2018-05-25

Bootstrap 4示例

使用手风琴示例：https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example 我修改了代码以支持卡片。

$('.collapse').on('shown.bs.collapse', function(e) {
  var $card = $(this).closest('.card');
  $('html,body').animate({
    scrollTop: $card.offset().top
  }, 500);
});

小提琴：https://jsfiddle.net/agpkc4v2/1/

Answer 2

我正在开发一个需要相同功能的项目。想出了以下代码。我添加了变量以便澄清：

$('#accordion').on('shown.bs.collapse', function (e) {

var panelHeadingHeight = $('.panel-heading').height();
var animationSpeed = 500; // animation speed in milliseconds
var currentScrollbarPosition = $(document).scrollTop();
var topOfPanelContent = $(e.target).offset().top;

if ( currentScrollbarPosition >  topOfPanelContent - panelHeadingHeight) {
    $("html, body").animate({ scrollTop: topOfPanelContent - panelHeadingHeight }, animationSpeed);
}});

Answer 3

2021 年更新

从 Bootstrap 5 开始，不再需要 jQuery。这是滚动到打开的手风琴项目顶部的香草 JavaScript 解决方案...

const accordionItems = document.querySelectorAll('.accordion-collapse')
const acc = document.getElementById('accordionExample')

accordionItems.forEach((el)=>{
    el.addEventListener('shown.bs.collapse',(e)=>{
        var scrollOffset = acc.scrollTop + el.parentNode.offsetTop
        acc.scroll({
            top: scrollOffset,
            left: 0, 
            behavior: 'smooth'
        })
    })
})

Demo

Bootstrap手风琴，点击活动（开放）手风琴顶部滚动？

3 个答案:

Bootstrap 4示例