SimpleBar Scrollbar插件 - 滚动到功能中的顶部 /重置位置

Question

当触发函数时，我需要能够滚动回到UI路由的Angular Onepage站点中的页面顶部，但是我使用了SimpleBar scrollbar插件作为自定义的滚动器，因此无法使用窗口滚动方法将用户带回页面顶部。

我不能使用任何窗口/文档滚动方法作为使用简单键的容器是固定的100VH容器，因此窗口始终滚动到顶部。

我尝试使用以下jQuery方法将滚动条的位置重置回顶部，但无法使其工作，并且在控制台中没有错误消息。

angular.element('#mainContent').simplebar('getScrollElement').scrollTop(0);

我还尝试了Plain JS，该js返回控制台中的"不是函数"：

var mainContent = new SimpleBar(document.getElementById('mainContent'));

main -content.simplebar.getScrollelement（）。scrolltop = 0;

Answer 1

看来new SimpleBar(xxx)方法与data-simplebar HTML属性不起作用。我不想以编程方式初始化简单键，所以我可以代替它：

$('#mainContent .simplebar-content-wrapper').scrollTop(some_value)

实际可滚动元素将具有simplebar-content-wrapper类，并且它将在您添加了SimpleBar的元素内。

在其文档中提到了simplebar-content-wrapper类，可以预期在版本中保持一致。

，如果您已经级联简单的键，可能会有问题。解决方案：

1. $('#mainContent .simplebar-content-wrapper')[0].scrollTop = some_value：这只会滚动正确的简单键
2. $('#mainContent>>>>.simplebar-content-wrapper').scrollTop(some_value)：SimpleBar组件的层次结构不能保证在将来的版本中不变，并且将来可能会失败。

Answer 2

我找到了解决方案。您可以访问滚动元素：

const el = new SimpleBar(document.getElementById('layout'));
el.scrollContentEl.scrollTop = 0;

Answer 3

您可以为此尝试。

$("body").animate({ scrollTop: 0 }, "slow");

Answer 4

var el = new SimpleBar(document.getElementById('myElement'));
el.getScrollElement().scrollTop = 0;