How to make the page scroll to top when clicking different tabs in jquery vertical tab

Question

I am a beginner in web designing.I used the Jquery vertical tab ( http://jqueryui.com/tabs/#vertical)codes to create 6 tabs in my website. But when the tabs are clicked it doesn't scroll to top of the page. Thus, making it hard for people to read the description and the contents of each tab. They have to scroll all the way to the top.

these are the default codes I am using.

<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

<script>
    $(function() {
        $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
        $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });
</script>

Can someone please tell me how to add a code to make the webpage scroll back to the top when each tabs are clicked. I will really appreciate your help. Thanx

Answer 1

Quoting from source . The scrollTo(x, y) method scrolls the content to the specified coordinates.

scrollTo(0,0) should work perfectly for your purpose.

$( "#tabs li" ).click(function() {
   //user clicked on the li
   scrollTo(0,0);
});

If you need to scroll to the start of an element, first you need to calculate the offset of that element relative to the document. For that we can use the .offset() method .

$("#tabs li").click( function(){
    var tabs_offset = $("#tabs").offset();
    scrollTo(tabs_offset.left, tabs_offset.top);
});