scrollTo plugin in a function

Question

this is quite simple, so I hope someone can help me.

Im using the scrollTo plugin to scroll to a div when a function is called.

for example:

 <script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
 <script type='text/javascript' src='scripts/jquery.scrollTo.js'></script>

 <div id='div1' style="margin-bottom:400px;"></div>
 <button onclick="scroll()"> scroll </button>

 <script>
  function scroll()
   {
  $.scrollTo( $('#div1'));
  alert('scroll');
    }
 </script>

The point here is i dont seem to know how to specify the function scrollTo.

The above example is, as the name says, an example. I need it to be in a function, not on the onclick of the button.

Thanks!

Answer 1

Try something like:

<button class="scroller" data-id="div1"> scroll </button>
<div id='div1' style="margin-bottom:400px;"></div>

<script>
$('.scroller').on('click', function () {
    var id = $(this).data('id');
    $.scrollTo($('#' + id));
    alert('scroll');
});
</script>

For each <button> you use, just add the scroller class (for example) and the data-id="THE DIV's ID" so the function knows which <div> to scroll to.

See this fiddle: http://jsfiddle.net/matthewbj/LaC7v/