Scroll top with slimscroll plugin

Question

I used slimScroll on my web page with the content is added by AJAX.

If I scroll down the scroll then reload with more content (AJAX load), the scroll bar itself always keep its position the same as before.

I wonder if the slimScroll has any function that I can call to scroll to top after loading the new content?

Grooms

Answer 1

I don't think the scroll option described by @rochal is going to work right now, as it doesn't appear to be used by the version currently up on GitHub. Instead try scrollTo or scrollBy.

To scroll to the top:

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

Conversely, if you want to scroll to the bottom, then the following should work:

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

Merrillmerrily

Works Great for the scroll to bottom. – Caffey

I love you. I truly do. Well you just helped me out a lot with this :) – Zygophyllaceous

Answer 2

Since version 1.0.0 if you need to scroll to the top you can use build in scrollTo method:

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

Eurhythmics

Thanks Rochal for your great plugin, it's really one of the best one i can find on the internet, but it seem that this way cannot resolve my issue.The scrollbar still keeps its position after i reload the content using ajax – Grooms

I have this exact same issue. The content is scrolled to the top, but the scrollbar remains in it's position. Anyone have any additional thoughts on this? – Upwind

Answer 3

This code has run for me.

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

This will take scroll bar at the bottom position and also take the content at the bottom of the div.

Rogatory

Answer 4

alternatively you can use javascript to solve this problems...

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

element-id is the id of your content area(normally its div)..

execute this code when new content is appended to your div

Hilliary

Answer 5

For me, the answer suggested by the author @rochal does not work, neither scrollTo nor scroll as slimScroll configuration parameters: both scroll the content but not the handle, and one of them even destroys the container height in my case.

Instead, this worked for me:

// 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.
;

Spillman