Question

I was given some great help by redsquare to get this far to change jquery tabs from links within the content, but I have one more issue that I’m looking for support on…

When a user clicks a link to switch to a different tab from within the content, can i get the page to jump to the top of the page?

Within my demo link, scroll to the bottom of the page to click the links and they switch tabs just perfectly, which you can confirm if you scroll up.

So, I’m looking for the switch to also jump the user to the top of the page, so the user doesn’t have to “scroll” to the top of the page to begin reading new content.

Here’s my demo:
http://jsbin.com/etoku3/11

Existing code:

<script type="text/javascript">
    $(document).ready(function() {
        var $tabs = $("#container-1").tabs();
        var changeTab = function(ev){
          ev.preventDefault();
          var tabIndex = this.hash.charAt(this.hash.length-1) -1;
          $tabs.tabs('select', tabIndex);
         };
        $('a.tablink').click(changeTab);
    });
</script> 

Answer 1

Place this in the changeTab function:

 $('body').scrollTop(0);

Your code:

$(document).ready(function() {

    var $tabs = $("#container-1").tabs();

    var changeTab = function(ev){

      ev.preventDefault();

      var tabIndex = this.hash.charAt(this.hash.length-1) -1;

      $tabs.tabs('select', tabIndex);

      $('html,body').scrollTop(0);  // Scroll to top
     };

    $('a.tablink').click(changeTab);

});

---

EDIT:

If you want to animate it to the top, use this instead:

$('html,body').animate({scrollTop:0}, 500)