Hi All

I have an Unordered List inside a DIV
and each list item has a nested div.
The Unordered List has a working Scriptalicious slider and mouse-wheel scroll - Yaaaaay!

Here's the fun part...
I want to create a button that when clicked, it jumps to a specified list item.

The old
Code:
<div><a href="#beees">beeeeeee</a></div>
works but the slider doesn't update with it - *sadface =[

This, I think is the code meant to be used, or at least I would like to use
Code:
<a href="#" onclick="Effect.ScrollTo('article_top'); return false;">Click me to scroll to the top of the article</a>
But I cant manage to implement it.... Please help
And here is my code so far

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Use a Slider as a Scrollbar Demo</title>
 <script src="../pages/js/prototype.js" type="text/javascript"></script>
 <script src="../pages/js/scriptaculous.js" type="text/javascript"></script>



        <style type="text/css" media="screen" >
             ul {
                list-style: none;
                margin: 0;
                padding: 0;
                border: none;
                }

            /* scrollable div area */
            #table_scripts {
                display: block;
                position: absolute;
                left:263px;
                top:147px;
                width:926px;
                height:785px;
                padding: 0px;
                border-top: 0;
                border-left: 0;
                overflow: hidden;
                white-space: nowrap;
                 z-index: 4;
            }
            
            /* wrap to make sure that image area is clickable */
            #wrap3 {
                position: absolute;
                left:1189px;
                top:147px;
                width: 20px;
                height: 785px;
                background: transparent url(../images/vert_track.png) no-repeat bottom left;
                z-index: 8;
            }
            
            /* vertical track */
            #track3 {
                position: absolute;
                width: 20px;
                height: 785px;
            }
            
            /* vertical track handle */
            #handle3 {
                width: 29px;
                height: 29px;
            }
            

            
#script_weld a{
    display: block;
    background: url(../images/script_b_weld.png) no-repeat top right;
    width:862px;
    height:34px;
}
#script_weld a:hover{
    background-position:bottom left;
}
#script_sharpen a{
    display: block;
    background: url(../images/script_b_weld.png) no-repeat top right;
    width:862px;
    height:34px;

}
#script_sharpen a:hover{
    background-position:bottom left;
}
        </style>

    </head>
    <body>
        <div>
        <div id="table_scripts">
            <ul>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_poooo">pooooooooooooooooooooooo</div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li>
                <div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_silly">this is the silly one</div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br><li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>
                <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
                <br>
                <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                <br>

            </ul>
            <div id="jump"><a href="#script_silly">beeeeeee</a></div>
            <div id="jump"><a href="#script_poooo">pooooooo</a></div>
</div>
</div>        
        <div id="wrap3">
            <div id="track3">
                <div id="handle3"><img src="../images/slider.png" alt="" /></div>
            </div>
        </div>


        <script type="text/javascript" language="javascript">
        // <![CDATA[
                     
                                 
            // vertical slider control
            var slider3 = new Control.Slider('handle3', 'track3', {
                axis: 'vertical',
                range: $R(0,40),

                onSlide: function(v) { scrollVertical(v, $('table_scripts'), slider3);  },
                onChange: function(v) { scrollVertical(v, $('table_scripts'), slider3); }
                
            });
            

            
            // scroll the element vertically based on its width and the slider maximum value
            function scrollVertical(value, element, slider) {
                element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
            }

            

            // disable vertical scrolling if text doesn't overflow the div
            if ($('table_scripts').scrollHeight <= $('table_scripts').offsetHeight) {
                slider3.setDisabled();
                $('wrap3').hide();
            }
            

            
            

            
            // mouse wheel code from http://adomas.org/javascript-mouse-wheel/
            function handle3(delta) {
                slider3.setValueBy(-delta);
            }

            /** Event handler for mouse wheel event. */
            function wheel(event){
                var delta = 0;
                if (!event) /* For IE. */
                    event = window.event;
                if (event.wheelDelta) { /* IE/Opera. */
                    delta = event.wheelDelta/120;
                    /** In Opera 9, delta differs in sign as compared to IE. */
                    if (window.opera)
                        delta = -delta;
                } else if (event.detail) { /** Mozilla case. */
                    /** In Mozilla, sign of delta is different than in IE.
                    * Also, delta is multiple of 3.
                    */
                    delta = -event.detail/3;
                }
        
                /** If delta is nonzero, handle it.
                * Basically, delta is now positive if wheel was scrolled up,
                * and negative, if wheel was scrolled down.
                */
                if (delta)
                    handle3(delta);
        
                /** Prevent default actions caused by mouse wheel.
                * That might be ugly, but we handle scrolls somehow
                * anyway, so don't bother here..
                */
                if (event.preventDefault)
                    event.preventDefault();
                
                event.returnValue = false;
            }

            // mozilla
            Event.observe('table_scripts', 'DOMMouseScroll', wheel);
            
            // IE/Opera
            Event.observe('table_scripts', 'mousewheel', wheel);


        // ]]>
        </script>
    

    </body>
</html>