仅在向上滚动时出现的返回顶部链接的 Javascript 语法帮助

Question

我有一个页面设置有一个返回顶部的链接(在整个栏中)在页面顶部向下滑动，只有在向上滚动时。

我是 Javascript 的初学者，所以我拼凑了一些东西，确实有效(它在向上滚动时显示，除非我们距离顶部 500 像素，在向下滚动时隐藏)，并且它使用了我得到的一些代码从这里开始不检查滚动的每个像素。

我想补充的是，即使您在到达子菜单后仍在向上滚动，那么顶部链接也应该再次滚出页面 - 一旦您位于顶部，我不需要返回顶部.

我已经通过添加第二个 Javascript 脚本使它工作，但我知道必须有更好的方法才能在第一次调用中使类似的东西工作。此外，第二次调用使用了 window.scroll 函数，我很确定这是错误的方法。

第一个脚本

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var subMenu = $('#subMenu').offset().top;

$(window).scroll(function(event){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

       // Make sure they scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If they scroll down, add class .nav-up.

    if (st > lastScrollTop && st ){
        // Scroll Down
         $('#backtotop').removeClass('nav-down').addClass('nav-up');
         $(".toplink").fadeOut("fast");


    } else {
        // Scroll Up
       if(st + $(window).height() < $(document).height() && st > 500) {
        $('#backtotop').removeClass('nav-up').addClass('nav-down');
        $(".toplink").fadeIn("slow");

        } 



    }


    lastScrollTop = st;

}

第二个脚本

    <script>

   $(window).scroll (function ()
   {var st = $(this).scrollTop();
    var subMenu = $('#subMenu').offset().top;


     if (st < subMenu) {
        $('#backtotop').removeClass('nav-down').addClass('nav-up');
        $(".toplink").fadeOut("fast");


     }

     });

    </script>

摆弄 HTML 和 CSS: https://jsfiddle.net/Lu0jz3nc/11/

Answer 1

我对您的 jsfiddle 做了一些修改，虽然它不是最优雅或最有效的解决方案，但它确实有效。 https://jsfiddle.net/aedm9cut/

这是JS:

var lastY = 0;
var subMenu = $('#subMenu').offset().top;

$(window).scroll(function(event){
    currentY = $(window).scrollTop();
    if(currentY > 500 && lastY > currentY){
           $('#backtotop').removeClass('nav-up').addClass('nav-down');
            $(".toplink").fadeIn("slow");
    }
    else{
        $('#backtotop').removeClass('nav-down').addClass('nav-up');
         $(".toplink").fadeOut("fast");
    }
    lastY = $(window).scrollTop();
});

这段代码做了两件事，检查你是否从顶部超过 500px，并检查你滚动的方向。如果您超过 500 像素并向上滚动，该栏将显示，否则不会显示。

这段代码可以改进，这样 if 和 else 语句中的代码不会在用户每次滚动时都运行，但也许你可以设置一个断点，让代码可以检测到用户已经过去，然后运行代码一次。现在，if/或 else 中的代码在滚动事件期间运行多次。