jquery选项卡切换链接,以便它们跳转到页面顶部？

Question

我得到了redsquare的一些很好的帮助,以便从内容中的链接更改jquery选项卡,但我还有一个问题,我正在寻找支持......

当用户单击链接以切换到内容中的其他选项卡时,我是否可以将页面跳转到页面顶部？

在我的演示链接中,滚动到页面底部以单击链接,它们可以完美地切换标签,您可以确认是否向上滚动.

因此,我正在寻找切换以将用户跳到页面顶部,因此用户无需"滚动"到页面顶部即可开始阅读新内容.

这是我的演示:http: //jsbin.com/etoku3/11

现有代码:

<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

把它放在changeTab函数中:

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

你的代码:

$(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);

});

编辑:

如果要将其设置为顶部动画,请使用此代码:

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