Question

如果用户向下滚动页面，我正在使用下面的代码在选项卡式容器中显示“向上箭头”。每个标签都有一个“向上箭头”。在原始代码中，我使用了.show和.hide，但这根本不起作用。在搜索解决方案的过程中，我看到scrolltop在显示后出现了一些问题：无，所以我选择了可见性：隐藏。

这在默认打开的选项卡上运行良好。但是，如果我导航到下一个选项卡，它将停止工作。我怀疑我需要添加一些绑定或刷新滚动功能的东西。（也许就像代码第二部分中的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-wise：

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

检查此示例jsfiddle

ScrollTop在动态选项卡中

1 个答案: