如何使用PerfectScrollbar滚动到页面指定元素？

问题原因 #

你之前所有滚动方案无效的核心原因是：Black Dashboard的PerfectScrollbar默认绑定在.main-panel自定义容器上，而非原生的window/body对象，直接操作全局滚动属性自然不会生效

解决方案 #

第一步：确认滚动容器 #

打开浏览器调试工具的元素面板，拖动页面滚动条，查看哪个元素的scrollTop属性实时变化，默认场景下是类名为main-panel的顶层内容容器，所有滚动逻辑都要作用在该容器上。

第二步：实现点击滚动逻辑 #

给菜单项绑定点击事件，直接操作.main-panel的滚动属性即可，示例代码如下：

// 锚点菜单项点击事件绑定
$('.nav-item a[href^="#"]').on('click', function (e) {
  // 阻止默认锚点跳转行为
  e.preventDefault();
  const targetSelector = $(this).attr('href');
  const targetElement = $(targetSelector);
  // 校验目标元素是否存在
  if (targetElement.length) {
    // 计算滚动偏移量，减去的70px是顶部固定导航栏高度，可根据实际场景调整
    const scrollOffset = targetElement.offset().top + $('.main-panel').scrollTop() - 70;
    // 带动画的滚动效果
    $('.main-panel').animate({ scrollTop: scrollOffset }, 300);
    // 不需要动画的话用下面的代码替换上面的animate行即可
    // $('.main-panel').scrollTop(scrollOffset);
  }
})

常见异常排查 #

如果代码执行后无响应，按以下优先级排查：

• 若菜单项为动态渲染生成，将事件绑定改为委托模式，避免绑定失效：

$(document).on('click', '.nav-item a[href^="#"]', function (e) {
  // 上面的核心逻辑不变
})

• 检查模板自带的PerfectScrollbar初始化配置（一般位于black-dashboard.js文件中），确认suppressScrollY参数未被设为true，没有禁用纵向滚动。

可选：移除PerfectScrollbar的溢出修复方案 #

如果你不想保留PerfectScrollbar，可添加以下CSS修复表格溢出问题，无需依赖第三方滚动组件：

.main-panel {
  overflow-y: auto;
  height: calc(100vh - 70px); /* 70px替换为实际顶部导航高度 */
}
.table-responsive {
  overflow-x: auto;
}

内容的提问来源于stack exchange，提问作者PaulJK