CODEWITHSUNDEEP
javascriptjqueryjquery-ui
rjosori
rjosori

Reputation: 23

Jquery UI Tabs Direct Links Issue

I am working on a page using the JQuery UI tabs, and my client requires that each tab has a direct link. I solved that with the following code:

$(function() {
    $("#tabs").tabs();
    $("#tabs").bind('tabsshow',function(event, ui) {
        window.location = ui.tab;
    })
});

Now when a user clicks on each tab the url appears like: http://url.com/#tablink, that user can then bookmark the URL, but the browser will automatically scroll down to where the #ID is located, which is annoying. I was able to override this when the user is clocking on the tabs by adding the following JQuery code:

$(".tab-set ul li a").click(function(e) {
    window.scrollTo(0,0);
});

However I can't find something that works to avoid this when the URL is entered directly in the address bar, rather than clicking a tab. I tried the following but it doesn't work:

        window.onload = scroll(0,0);

and

        window.onload = scrollTo(0,0);

Upvotes: 2

Views: 561

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69915

This is the default browsers behavior to scroll to the hash.

You can try this.

$(function(){
    if(location.hash && location.hash == "#your-tab-id-name-here") {
        $('html, body').animate({scrollTop:0}, 0);
    }
});

Upvotes: 0

Johan
Johan

Reputation: 35223

What about

$(function(){
    $.scrollTo('0px');
    //or
    $.scrollTo('body',0);
});

Upvotes: 1

Related Questions