Question

I have exhausted all avenues in trying to solve this problem and in the need some expert advice! I have tailored the sagscroller to do everything I need, in terms of scrolling up and down through a div enclosed list and is working very well. Below is a sample of one of the scroll boxes that I use, i.e.,

<div id="new_scroller" class="sagscroller">
    <ul id="new" class="subMenu">
        <li id="subMenu_projects1"><a>project 1</a></li>
        <li id="subMenu_projects2"><a>project 2</a></li>
         <li id="subMenu_projects3"><a>project 3</a></li>
            etc
    </ul> <!-- END OF subMenu -->
</div>  

The problem I am having is that after hiding this scrollbox and showing another one, the scroll position in the list is maintained, hence with multiple scroll boxes that are first hidden and then shown, it can become confusing for the users to not know where they are in a particular list.

The question is, how do I “reload” the list, each time a new scroll box is selected, without having to reload the page – any help would be greatly appreciated and would save my sanity in the process!

thanks

Answer 1

When showing your scrollbox do something like this:

$("#new_scroller").fadeIn(1000).find('ul').css('top', 0);

The <ul> is changing top position when you scroll, just reset it to zero and it should be at the top when it’s shown again.