How to stop page going to top when clicking different tabs in jquery vertical tab

Question

example here: http://www.bajistech.info/tiltindicators.html#TiltWatch-Plus1

Full Code:

$(document).ready(function(){

    if (
        $('ul#verticalNav li a').length &&
        $('div.section').length
    ) {
        $('div.section').css( 'display', 'none' );
        //$('ul#verticalNav li a').each(function() { // no need for each loop
        $('ul#verticalNav li a').click(function() { // Use $('ul#verticalNav li a').click
            showSection( $(this).attr('href') );
        });
        //});
        if(window.location.hash) // if hash found then load the tab from Hash id
        {
           showSection( window.location.hash);// to get the div id
        }
        else // if no hash found then default first tab is opened
        {
            $('ul#verticalNav li:first-child a').click();
        }
    }
});

Answer 1

The 'going to top' behaviour you describe is typically caused by a broken hashtag link, something like:

<a href="#nonExistingId">link</a>

or simply

<a href="#">link</a>

Regarding the code you posted: I don't know why you would need it.

Check out the example at http://jqueryui.com/tabs/#vertical , and click view source. If you properly instantiate the tab widget like

$("#idOfMyTabElement").tabs();

And you make sure that the links in the tab element point to valid div's (like in the example), then you should be fine.

Answer 2

I am unsure whether you want it to scroll to top or just not change the scroll on the vertical nav click, so I will do my best to answer both.

event.preventDefault(); will stop the default action for the links click event

You can read more here: https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

$('ul#verticalNav li a').click(function( event ) { // Use $('ul#verticalNav li a').click
    showSection( $(this).attr('href') );

    // to scroll your document to the top
    //$(window)animate('scrollTop', 0); //uncomment if needed

    // to stop the default action of the link
    event.preventDefault();
});