set the focus on the scroller when button is clicked

Question

hi i have a script

<script type="text/javascript">
window.addEvent('domready', function(){ 
      var totIncrement      = 0;
      var increment         = 560;
      var maxRightIncrement = increment*(-6);
      var fx = new Fx.Style('slider-list', 'margin-left', {
                duration: 1000,
                transition: Fx.Transitions.Back.easeInOut,
                wait: true
       });

       //-------------------------------------
      // EVENTS for the button "previous"
      $('previous').addEvents({ 
          'click' : function(event){ 
          if(totIncrement<0){
                    totIncrement = totIncrement+increment;
                    fx.stop()
                    fx.start(totIncrement);
                }
            }                 
      }); 

       //-------------------------------------
      // EVENTS for the button "next"
      $('next').addEvents({ 
          'click' : function(event){ 
             if(totIncrement>maxRightIncrement){
                 totIncrement = totIncrement-increment;
                fx.stop()
                fx.start(totIncrement);
            }
          }               
      })


});
    </script>

in mootools v1.1

it makes a scroller function at the bottom of my html page. but when i click the next button the page's focus moves to the top of the page. how do i keep it on the scroller?

this is the html fragment:

<h3>Our Pastas</h3>

<div id="slider-buttons">
<a href="#" id="previous">Previous</a> | <a href="#" id="next">Next</a&gt;
</div>

<div id="slider-stage">
<ul id="slider-list">

<li class="list_item">

<div id="thumbnail"><a href="xxx/product-catalog/pasta/long-pasta-in-brown-bags/bucatini"><img src="xxx/images/stories/products/_thumb1/bucatini.gif"></a></div><h4><a href="xxx/product-catalog/pasta/long-pasta-in-brown-bags/bucatini">Rustichella d'Abruzzo Bucatini</a></h4>
</li>


<li class="list_item">
<div id="thumbnail"><a href="xxx/product-catalog/pasta/pasta-in-trays/calamarata"><img src="xxx/images/stories/products/_thumb1/calamarata.jpg"></a></div><h4><a href="xxx/product-catalog/pasta/pasta-in-trays/calamarata">Rustichella d'Abruzzo Calamarata</a></h4>
</li>


<li class="list_item">
<div id="thumbnail"><a href="xxx/product-catalog/pasta/pasta-in-trays/cannolicchi"><img src="xxx/images/stories/products/_thumb1/cannolicchi.jpg"></a></div><h4><a href="xxx/product-catalog/pasta/pasta-in-trays/cannolicchi">Rustichella d'Abruzzo Cannolicchi</a></h4>
</li>


</ul></div>

Answer 1

this is mootools 1.11, mod your next and previous functions like so:

  $('next').addEvents({ 
      'click' : function(event){ 
         // add this to stop the default click event.
         new Event(event).stop();

         // continue as usual.
         if(totIncrement>maxRightIncrement){
             totIncrement = totIncrement-increment;
            fx.stop()
            fx.start(totIncrement);
        }
      }               
  });

in mootools 1.2+, all you need is event.stop(); or event.preventDefault();