您可以通过获取"目标元素"的顶部，然后在主体上调用animate来设置滚动的动画。

$('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年5月25日 *

Bootstrap 4示例

使用 accordion 示例：www.example.com我已经修改了代码以支持卡。https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example I have modified the code to support cards.

$('.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/

• 编辑时间：2019年7月18日 *

我让它更漂亮...

引导3

https://jsfiddle.net/erutfgvn/

$('.panel-collapse').on('show.bs.collapse', function(e) {
  var $panel = $(this).closest('.panel');
  var $open = $(this).closest('.panel-group').find('.panel-collapse.in');
  
  var additionalOffset = 0;
  if($panel.prevAll().filter($open.closest('.panel')).length !== 0)
  {
        additionalOffset =  $open.height();
  }
  $('html,body').animate({
    scrollTop: $panel.offset().top - additionalOffset
  }, 500);
});

引导4

https://jsfiddle.net/9p7f0hut/

$('.collapse').on('show.bs.collapse', function(e) {
  var $card = $(this).closest('.card');
  var $open = $($(this).data('parent')).find('.collapse.show');
  
  var additionalOffset = 0;
  if($card.prevAll().filter($open.closest('.card')).length !== 0)
  {
        additionalOffset =  $open.height();
  }
  $('html,body').animate({
    scrollTop: $card.offset().top - additionalOffset
  }, 500);
});

• 编辑时间：2021年4月20日 *

引导5

https://jsfiddle.net/hLzg0n2y/2/

$('.collapse').on('shown.bs.collapse', function(e) {
  var $card = $(this).closest('.accordion-item');
  var $open = $($(this).data('parent')).find('.collapse.show');
  
  var additionalOffset = 0;
  if($card.prevAll().filter($open.closest('.accordion-item')).length !== 0)
  {
        additionalOffset =  $open.height();
  }
  $('html,body').animate({
    scrollTop: $card.offset().top - additionalOffset
  }, 500);
});

2021年更新

从Bootstrap 5开始，jQuery不再是必需的。下面是一个普通的JavaScript解决方案，可以滚动到打开的 accordion 项的顶部...

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

我正在做一个需要相同功能的项目。产生了下面的代码。我添加了变量以进行说明：

$('#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);
}});

$('.accordion-button').on("click",function(event){
    var accordion = $(this).parent().parent().parent();
    window.setTimeout(function(){
      $('body,html').stop().animate({ scrollTop: accordion[0].scrollHeight}, 1000);
    },100)
  }

当用户点击折叠箭头按钮时，上面的代码将执行以下步骤：

1. accordion 变量被设置为 accordion 按钮的类为“.accordion”的父节点。
   2.accordion[0].scrollHeight -查找打开的 accordion 的滚动高度。
   3.使用animate选项和scrollTop，页面将移动到折叠式屏幕的滚动高度。
   4.为了确保第2步和第3步是在 accordion 打开后完成的，setTimeout函数用于计算 accordion 打开后的代码时间。如果 accordion 主体较长，则可以相应地更改该值。在上面的代码中，当前值为100。

这里有香草Javascript。
为具有accordion-collapse类的元素给予唯一ID（collapse-{{uniqueId}}）后：

let accordionItemsToBeFocused = document.querySelectorAll("[id^=collapse-]");

accordionItemsToBeFocused.forEach((el)=>{
    el.addEventListener('shown.bs.collapse',(e)=>{
        window.location.href = '#' + el.id
    })
})