动态选项卡中的 ScrollTop

Question

如果用户向下滚动页面，我将使用下面的代码在选项卡式容器中显示“向上箭头”。每个选项卡都有一个“向上箭头”。在原始代码中，我使用了 .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);
    });
});

Answer 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