Jquery tabs scroll to content when click on tab

Question

This is starting to test me a little bit now. I have a set of Jquery Tabs using the UI version 1.10.

        $('#tabs').tabs();

<ul>
<li><a href="#id1">Tab 1</a></li>
<li><a href="#id2">Tab 2</a></li>
</ul>
<div id="id1">Content in here</div>
<div id="id2">Content in here</a>

Simple tab structure. Because the links have a # in the href, when you click on the tab menu it jumps you down just below the mnenu of the tabs to the content. I need to stop this from happening and just staying where it's clicked..

Any ideas?

Answer 1

By adding this code it stopped the scrolling.

$(document).ready(function(){
//Code to stop scrolling to tab content
        $("#tabs").tabs();
        $('.ui-tabs-anchor').click(function (evt) {
           // stops from submitting the form
           evt.preventDefault();
           return false;
        }); 

      });
      //Code to stop scrolling to tab content
        $('.ui-tabs-anchor a').bind('click',function(evt){
            evt.preventDefault();
        });
        enter code here