Postback scroll position with jScrollPane

Question

I have a vertical menu inside a jScrollPane in a ASP.NET page. When the user clicks a menu choice it displays content in another panel relating to the selection. How can I make sure that the selected menu choice is in view when the page refreshes.

Answer 1

I'm looking for the same solution myself. You may have some success with my temporary solution using the scrollToElement api. Providing you can locate the specific menu item using a jquery selector you can have jScroll automatically jump to it in the scroll pane. eg

$(window).load(function()
    {var api=$('#yourMenu').data('jsp');
    api.scrollToElement($('.selectedOption'));
});

This will require the latest version of jscrollpane ( http://jscrollpane.kelvinluck.com )

Answer 2

I wanted the same solution, and found this, which wasn't much help.

I eventually got it to work.

The position of the scrollbar is saved to localstorage, then when the page loads again, either by refresh or back from another page, if localstorage has a value greater than 0 which represents the top of the scrollbar (default, unscrolled position), it scrolls to that position.

var element = $(".scroll-pane").jScrollPane({showArrows:!0});
if(void 0 != element) {
  var api = element.data("jsp");
  $(function() {
    0 < parseInt(localStorage.getItem("ScrollPosition")) && api.scrollToY(parseInt(localStorage.getItem("ScrollPosition")));
    $(".scroll-pane").bind("jsp-scroll-y", function(b, a) {
      localStorage.setItem("ScrollPosition", a)
    }).jScrollPane()
  })
};