Question

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

当用户点击链接切换到内容中的其他标签时，我是否可以让页面跳转到页面顶部？

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

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

现有代码：

<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)

Answer 2

window.location = "#"; 很简单，没有javascript可能不会被旧版浏览器滚动...

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

2 个答案: