使用 slimscroll 插件滚动顶部答案

【问题标题】：Scroll top with slimscroll plugin使用 slimscroll 插件滚动顶部
【发布时间】：2018-09-06 20:22:16
【问题描述】：

我在我的网页上使用了slimScroll，内容是通过 AJAX 添加的。

如果我向下滚动滚动然后重新加载更多内容（AJAX 加载），滚动条本身始终保持与以前相同的位置。

我想知道slimScroll 是否有任何函数可以在加载新内容后调用以滚动到顶部？

【问题讨论】：

标签： jquery ajax

【解决方案1】：

我认为@rochal 描述的scroll 选项现在不会起作用，因为the version currently up on GitHub 似乎没有使用它。请改用scrollTo 或scrollBy。

滚动到顶部：

$('#elem_id').slimScroll({ scrollTo : '0px' });

相反，如果你想滚动到底部，那么以下应该可以工作：

var scrollTo_val = $('#elem_id').prop('scrollHeight') + 'px';
$('#elem_id').slimScroll({ scrollTo : scrollTo_val });

【讨论】：

非常适合滚动到底部。
我爱你。我是真的。好吧，你帮了我很多忙:)

【解决方案2】：

从 1.0.0 版本开始，如果您需要滚动到顶部，您可以使用 build in scrollTo 方法：

$(element).slimScroll({ scrollTo: '0' });

【讨论】：

感谢 Rochal 提供的出色插件，它确实是我在互联网上找到的最好的插件之一，但似乎这种方式无法解决我的问题。重新加载后滚动条仍保持其位置使用ajax的内容
我也有同样的问题。内容滚动到顶部，但滚动条保持在其位置。有人对此有任何其他想法吗？

【解决方案3】：

此代码已为我运行。

var scrollTo_int = $('#elem_id').prop('scrollHeight') + 'px';
$('#elem_id').slimScroll({scrollTo : scrollTo_int });

这将在底部位置获取滚动条，并在 div 的底部获取内容。

【讨论】：

【解决方案4】：

您也可以使用 javascript 来解决这个问题...

document.getElementById("element-id").scrollTop = document.getElementById("element-id").scrollHeight;

element-id 是您内容区域的id（通常是div）..

当新内容附加到您的 div 时执行此代码

【讨论】：

【解决方案5】：

对我来说，作者@rochal 建议的答案不起作用，scrollTo 和scroll 都不是 slimScroll 配置参数：都是滚动内容而不是句柄，其中一个甚至破坏了容器高度我的情况。

相反，这对我有用：

// let's assume the plugin was initialized with this class name present:
$('.slim-scroll').slimScroll(config);

// then this is the solution.
$('.slimScrollDiv.inQuestion').find('.slimScrollBar').css({ top: 0 }).end().find('.slim-scroll').get(0).scrollTop = 0;

// -----------------------------
// once more, with explanations:
$('.slimScrollDiv.inQuestion')        // this is the ‹div› wrapped around our .slim-scroll element by the plugin. It always has the 'slimScrollDiv' class name.

  .find('.slimScrollBar')             // first address the handle. The order is important because we're going to break the chain at the end.
    .css({ top: 0 })                  // 'scroll' it.
  .end()                              // stay in the jQuery chain; go back to the last jQuery collection before find().

  .find('.slim-scroll')               // address the content.
    .get(0)                           // leave jQuery terrain, get the DOM element.
      .scrollTop = 0                  // scroll it.
;

【讨论】：