JQuery UI选项卡导致屏幕“跳转”

Posted 2021-04-06

我正在使用最新版本的jQuery UI tabs。我的标签位于页面底部。

每次单击选项卡时，屏幕都会跳到顶部。

我怎样才能防止这种情况发生？

请看这个例子：

http://5bosses.com/examples/tabs/sample_tabs.html

答案

如果你正在制作你的标签过渡动画（即.tabs({ fx: { opacity: 'toggle' } });），那么这就是发生的事情：

在大多数情况下，跳转不是由“＃”链接后的浏览器引起的。页面跳转是因为在两个选项卡窗格之间的动画中点，两个选项卡窗格都是完全透明和隐藏的（如display：none），因此整个选项卡部分的有效高度瞬间变为零。

如果零高度选项卡部分导致页面更短，那么页面似乎会跳起来补偿，而实际上它只是调整大小以适应（暂时）更短的内容。说得通？

解决此问题的最佳方法是为选项卡式部分设置固定高度。如果这是不合需要的（因为您的标签内容的高度不同），请改用：

jQuery('#tabs').tabs({
    fx: { opacity: 'toggle' },
    select: function(event, ui) {
        jQuery(this).css('height', jQuery(this).height());
        jQuery(this).css('overflow', 'hidden');
    },
    show: function(event, ui) {
        jQuery(this).css('height', 'auto');
        jQuery(this).css('overflow', 'visible');
    }
});

它将在选项卡转换之前设置窗格的计算高度。出现新标签后，高度将重新设置为“自动”。溢出设置为“隐藏”以防止内容从短选项卡转到较高选项卡时从窗格中突破。

这对我有用。希望这可以帮助。

另一答案

> var scroll_to_x = 0; var scroll_to_y =
> 0;
> $('.ui-tabs-nav').bind('tabsselect',
> function(event, ui) {
>     scroll_to_x = window.pageXOffset;
>     scroll_to_y = window.pageYOffset; }); $('.ui-tabs-nav').bind('tabsshow',
> function(event, ui) {
>     window.scroll(scroll_to_x, scroll_to_y); });

谢谢你的帮助！请告诉我你还能找到什么。

以上功能有效（屏幕不会永久移动）......但是，点击时屏幕非常不稳定。

这是一个简单的示例，显示如何单击选项卡导致屏幕跳到顶部（没有上面的代码）：http://5bosses.com/examples/tabs/sample_tabs.html

请注意，没有使用动画。

另一答案

我喜欢在我的链接中使用href =“＃”，但不会将用户带到任何地方，但只要添加onclick =“return false;”就可以执行此操作。我想，密钥不是将用户发送到“＃”，这取决于浏览器似乎默认为当前页面的顶部。

另一答案

我从this page的评论中发现了一种更简单的方法，就是简单地删除href =“＃”，它就不会再跳到顶端了！我验证了它对我有用。干杯

另一答案

我遇到了同样的问题，而且我自己也在旋转，所以如果你在页面底部，浏览器窗口会向上滚动。标签容器的固定高度适合我。有点奇怪的是，如果你离开窗户或标签然后回去，它仍然会滚动。但不是世界末日。

另一答案

用href =“javascript：void（0）;”替换href =“＃”;在'a'元素中

100％工作

另一答案

我有这样的问题。我的代码是：

$("#tabs").tabs({
  hide: {
    effect: "fade",
    duration: "500"
  },
  show: {
    effect: "fade",
    duration: "500"
  }
});

我只是删除了show，它就像一个魅力！

 $("#tabs").tabs({
      hide: {
        effect: "fade",
        duration: "500"
      }
 });

另一答案

我发现在我的情况下，标签href=#example1导致页面跳转到id的位置。为标签添加固定高度没有区别所以我刚刚添加：

$('.nav-tabs li a').click( function(e) { e.preventDefault(); });

另一答案

你试过了吗：

fx: {opacity:'toggle', duration:100}

另一答案

如果你有这些方面的东西：

<a href="#" onclick="activateTab('tab1');">Tab 1</a>

尝试在tab激活命令后添加return false;：

<a href="#" onclick="activateTab('tab1'); return false;">Tab 1</a>

另一答案

我的猜测是你正在设置标签转换的动画？我遇到了同样的问题，每次点击页面滚动都会跳回到顶部。

我在jquery源代码中找到了这个：

 // Show a tab, animation prevents browser scrolling to fragment,

果然，如果我有这个：

$('.tab_container > ul').tabs();    
$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

我的代码跳到顶部并且很烦人（但有动画）。如果我改变它：

$('.tab_container > ul').tabs();    
//$('.tab_container > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle', duration: 'fast' } });

没有标签动画，但在标签之间切换是顺利的。

我找到了一种方法让它向后滚动，但这不是一个正确的修复，因为浏览器仍然在单击选项卡后跳到顶部。滚动发生在事件tabsselect和tabsshow之间，因此以下代码跳回到您的选项卡：

var scroll_to_x = 0;
var scroll_to_y = 0;
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
    scroll_to_x = window.pageXOffset;
    scroll_to_y = window.pageYOffset;
});
$('.ui-tabs-nav').bind('tabsshow', function(event, ui) {
    window.scroll(scroll_to_x, scroll_to_y);
});

我会发布更多的进展。

另一答案

我得到了解决方案......

如何在单击选项卡时停止屏幕跳跃：

将包含选项卡的div包装在具有固定高度的div中。

请参见此处的示例：http://5bosses.com/examples/tabs/sample_tabs.html

另一答案

我在jquery ui的菜单中遇到了同样的问题 - 锚点击事件上的preventDefault（）会阻止页面滚动回到顶部：

 $("ul.ui-menu li a").click(function(e) {
      e.preventDefault();
 });

另一答案

迈克的解决方案大大证明了这一原则，但它有一个很大的缺点 - 如果结果页面很短，屏幕就会跳到顶端！唯一的解决方案是记住scrollTop，并在切换选项卡后恢复它。但在恢复之前，适当放大页面（html标签）：

（编辑 - 为新的Jquery UI API修改+大页面的小改进）

$(...).tabs({
    beforeActivate: function(event, ui) {
        $(this).data('scrollTop', $(window).scrollTop()); // save scrolltop
    },
    activate: function(event, ui) {
        if (!$(this).data('scrollTop')) { // there was no scrolltop before
            jQuery('html').css('height', 'auto'); // reset back to auto...
                    // this may not work on page where originally
                    // the html tag was of a fixed height...
            return;
        }
        //console.log('activate: scrolltop pred = ' + $(this).data('scrollTop') + ', nyni = ' + $(window).scrollTop());
        if ($(window).scrollTop() == $(this).data('scrollTop')) // the scrolltop was not moved
            return;                // nothing to be done
        // scrolltop moved - we need to fix it
        var min_height = $(this).data('scrollTop') + $(window).height();
            // minimum height the document must have to have that scrollTop
        if ($('html').outerHeight() < min_height) { // just a test to be sure
                            // but this test should be always true
            /* be sure to use $('html').height() instead of $(document).height()
               because the document height is always >= window height!
               Not what you want. And to handle potential html padding, be sure
               to use outerHeight instead!
                   Now enlarge the html tag (unfortunatelly cannot set
               $(document).height()) - we want to set min_height
               as html's outerHeight:
             */
            $('html').height(min_height -
                 ($('html').outerHeight() - $('html').height()));
        }
        $(window).scrollTop($(this).data('scrollTop')); // finally, set it back
    }
});

也适用于fx效果。

另一答案

尝试使用event.preventDefault();。在切换选项卡的click事件上。我的功能看起来像这样：

    $(function() {
        var $tabs = $('#measureTabs').tabs();
        $(".btn-contiue").click(function (event) {
            event.preventDefault();
            $( "#measureTabs" ).tabs( "option", "active", $("#measureTabs").tabs   ('option', 'active')+1  );
        });
    });

另一答案

谢谢你的帮助。很好的建议，但我之前没有运气。我认为JQuery UI可能会覆盖我的努力。

以下是每个标签的代码：

<li class=""><a href="#fragment-2"><span>Two</span></a></li>

我已经尝试过这个但没有成功：

<li class=""><a href="#fragment-2" onclick="return false;"><span>Two</span></a></li>

这是一个简单的例子（不返回false）：http://5bosses.com/examples/tabs/sample_tabs.html

还有其他建议吗？

另一答案

尝试使用css为每个选项卡内容区域（而不是选项卡本身）添加最小高度。这为我解决了这个问题。 :)