Simplebar 滚动条插件 - 在函数中滚动到顶部/重置位置答案

【问题标题】：Simplebar scrollbar plugin - Scroll to top / reset position in functionSimplebar 滚动条插件 - 在函数中滚动到顶部/重置位置
【发布时间】：2017-10-03 10:18:03
【问题描述】：

当触发一个功能时，我需要能够在我的 ui-routed 角单页网站中滚动回页面顶部，但我使用 simplebar 滚动条插件作为自定义滚动条，所以可以t 使用 window scrolltop 方法将用户带回页面顶部。

我不能使用任何窗口/文档滚动方法，因为使用 simplebar 的容器是一个固定的 100vh 容器，因此窗口总是滚动到顶部。

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

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

我也在纯 js 中尝试过这个，它在控制台中返回“不是函数”：

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

mainContent.SimpleBar.getScrollElement().scrollTop = 0;

【问题讨论】：

您找到解决方案了吗？我也面临同样的问题。我使用 ScrollToPlugin 创建了一个可滚动的容器。没有插件，我可以滚动到锚点。但是在插件之后，我不能。此示例是假设演示解决方案，但我无法完成。 github.com/Grsmto/simplebar/blob/master/demo/stress-test.html

标签： javascript jquery angularjs scrollbar

【解决方案1】：

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

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

【讨论】：

这是具有data-simplebar 属性的同一个 HTML 元素吗？

【解决方案2】：

您可以为此尝试 .animate：

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

【讨论】：

请阅读问题。 body/window 不能动画，因为它总是在顶部，simplebar div 是固定的 100vh 高度，因此窗口/文档滚动不起作用。

【解决方案3】：

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

【讨论】：

【解决方案4】：

似乎new SimpleBar(xxx) 方法不适用于data-simplebar html 属性。我不想以编程方式初始化 SimpleBar，所以我改用它：

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

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

simplebar-content-wrapper 类在其documentation 中被提及，并且可以预期在各个版本之间保持一致。

如果你有级联 SimpleBars 会有问题。解决方案：

$('#mainContent .simplebar-content-wrapper')[0].scrollTop = some_value：这只会滚动正确的 SimpleBar，因为现在 JQuery is in document order 返回的元素。
$('#mainContent>>>>.simplebar-content-wrapper').scrollTop(some_value)：SimpleBar 组件的层次结构不保证在未来版本中保持不变，未来可能会失败。

【讨论】：