简单滚动条插件 - 在函数中滚动到顶部/重置位置

Question

我需要在我的ui-router单页站点中触发函数时能够滚动回页面顶部，但我已经使用了simplebar滚动条插件作为自定义滚动条，因此无法使用window.scrolltop方法将用户带回页面顶部。

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

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

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

我也尝试过使用纯js，但在控制台中返回“不是一个函数”：

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

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

主内容区域的SimpleBar对象获取滚动元素并将其scrollTop属性设置为0。

- user7138187

---

你找到解决方案了吗？我也遇到了同样的问题。我使用ScrollToPlugin创建了一个可滚动的容器。在没有插件的情况下，我可以滚动到锚点。但是在使用插件后，我就无法滚动了。这个示例本应该演示解决方案，但我无法完成它。https://github.com/Grsmto/simplebar/blob/master/demo/stress-test.html - Coisox

Answer 1

看起来使用“new SimpleBar(xxx)”方法无法与“data-simplebar”HTML属性一起使用。 我不想以编程方式初始化SimpleBar，所以我使用了这个替代方案：

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

实际的可滚动元素应该具有 simplebar-content-wrapper 类，并且它应该在您为其添加 SimpleBar 的元素内部。 simplebar-content-wrapper 类在其 文档 中提到，并且可以期望在各个版本中保持一致。

如果您有级联的 SimpleBars，则可能会出现问题。解决方案：

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

- Meow Cat 2012

Answer 2

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

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

- Alex

---

这是具有 data-simplebar 属性的相同 HTML 元素吗？ - David Casanellas

Answer 3

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

- Mahdi Bashirpour

Answer 4

你可以尝试使用 .animate 来实现这个功能：

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

- Abhilasha

---

请阅读问题。主体/窗口无法进行动画处理，因为它始终位于顶部，simplebar div 是固定的 100vh 高度，因此窗口/文档滚动不起作用。 - user7138187