使用slimscroll插件滚动顶部
我在我的网页上使用了slimScroll
,内容由AJAX添加。
如果我向下滚动滚动然后重新加载更多内容(AJAX加载),滚动条本身始终保持其位置与以前相同。
我想知道slimScroll
是否有任何function可以在加载新内容后调用滚动到顶部?
我不认为@rochal描述的scroll
选项现在可以正常工作,因为它似乎没有被GitHub上当前使用的版本使用。 而是尝试scrollTo
或scrollBy
。
要滚动到顶部:
$('#elem_id').slimScroll({ scrollTo : '0px' });
相反,如果要滚动到底部,则以下内容应该有效:
var scrollTo_val = $('#elem_id').prop('scrollHeight') + 'px'; $('#elem_id').slimScroll({ scrollTo : scrollTo_val });
从版本1.0.0开始,如果需要滚动到顶部,可以使用scrollTo方法中的build:
$(element).slimScroll({ scrollTo: '0' });
这段代码适合我。
var scrollTo_int = $('#elem_id').prop('scrollHeight') + 'px'; $('#elem_id').slimScroll({scrollTo : scrollTo_int });
这将在底部位置采用滚动条,并且还获取div底部的内容。
或者你可以用javascript来解决这个问题……
document.getElementById("element-id").scrollTop = document.getElementById("element-id").scrollHeight;
element-id
是你的内容区域的id
(通常是它的div
)..
将新内容附加到div
时执行此代码
对我来说,作者@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. ;