动态选项卡中的 ScrollTop

Posted 2023-02-25

【中文标题】动态选项卡中的 ScrollTop

【英文标题】：ScrollTop in a dynamic tab

【发布时间】：2013-12-04 20:53:36

【问题描述】：

如果用户向下滚动页面，我将使用下面的代码在选项卡式容器中显示“向上箭头”。每个选项卡都有一个“向上箭头”。在原始代码中，我使用了 .show 和 .hide，但这根本不起作用。在寻找解决方案时，我阅读 scrolltop 在 display:none 后遇到了一些麻烦，所以我选择了 visibility:hidden。

这在默认打开的选项卡上效果很好。但是，如果我导航到下一个选项卡，它就会停止工作。我怀疑我需要添加一些绑定或刷新滚动功能的东西。 （或许像第二部分代码中的on click功能？）

/* Scroll Arrow */
jQuery(document).ready(function ($) 

$(window).scroll(function () 
    if ($(this).scrollTop() > 300) 
        $("#sideAnchor").css('visibility', 'visible');

     else 

        $("#sideAnchor").css('visibility', 'hidden');
    
  );
);

/* Scroll Top */
jQuery(document).ready(function($)
  $("#content-home").on( "click", "#mainAnchor", function() 
$("#content-home").scrollTop(0);
    );
);

jQuery(document).ready(function($)
  $("#sidemenu-container").on( "click", "#sideAnchor", function() 
$("html, body").scrollTop(0);
    );
);

【参考方案1】：

你不需要有很多jQuery(document).ready()，这不是一个好习惯。这一切都与只有一个一样。此外，您不需要在每个选项卡上都有一个“向上箭头”，您可以只拥有一个，将其定位在底部角落fixed。

您只需要在用户单击每个选项卡时重置顶部的滚动条。

$('tabs').click(function()
    $(window).scrollTop(0);
);

$(window).scroll(function () 
   if ($(this).scrollTop() > 300) 
       $("#sideAnchor").css('visibility', 'visible');
   else
       $("#sideAnchor").css('visibility', 'hidden');
   
);

您还可以在 UX 方面为滚动到顶部设置动画：

$('up_arrow').click(function()
    $('body, html').animate(scrollTop:0,'slow');
);

查看此示例jsfiddle

【讨论】：

感谢您的回答马克。由于布局的设置方式，我认为我需要每个选项卡上的箭头。 （在那个地方有一个固定的 div 已经有动态内容）无论如何它让我思考，如果重组它以合并你的修复。现在容易多了。 :) 还感谢有关“准备好文档”的评论删除了其中的一些内容。我知道动画功能，只是读到它在手机上可能很麻烦。所以我想不使用 is，无论如何谢谢！