Fiddle

Question

我设置了一个页面设置，其中有一个回到顶部的链接（在整个栏中）在页面顶部向下滑动，仅在向上滚动时。

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

我想要添加的是，即使您在进入子菜单时仍然向上滚动，然后顶部链接应该再次滚动页面 - 我不需要在您到达时返回顶部顶端。

我已经通过添加SECOND Javascript脚本来实现这一点，但我知道必须有一个更好的方法来让这样的东西在第一次调用中工作。此次调用也使用window.scroll函数，我很确定这是错误的方法。

FIRST SCRIPT

// 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并检查滚动的方向。如果你超过500px并向上滚动，则显示该栏，否则不会。

可以改进此代码，以便每次用户滚动时都不会运行if和else语句中的代码，但也许您可以创建代码可以检测到用户已经过去然后运行代码的断点一旦。现在，在滚动事件期间，if /或else中的代码会多次运行。

Answer 2

简单，请调用hasScrolled属性中的onclick。现在我添加了一个特殊参数forceup，当为true时会运行特殊代码使其隐藏。因此，当您点击至顶部按钮时，它会强制它上升。 window.hasScrolled的原因是使其成为全球性的。

window.hasScrolled = function (forceup) {

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

//Rest of code
}

Fiddle

Answer 3

你应该能够在一个全局变量的帮助下在窗口滚动处理程序中完成所有这些操作。

var MIN_DELTA = 5;
var MIN_SCROLLTOP = 500;
var MENU_HEIGHT = $('#backtotop').height();

$('#backtotop').addClass('nav-up');

var lastScrollTop = 0;
$(window).scroll(function (event) {
    var scrollTop = $(window).scrollTop();
    if (scrollTop > MENU_HEIGHT) {
        if (scrollTop < lastScrollTop) { // Scrolling up
            if (scrollTop > MIN_SCROLLTOP) {
                if (scrollTop < (lastScrollTop - MIN_DELTA)) {
                    $('#backtotop').removeClass('nav-up').addClass('nav-down');
                    $(".toplink").fadeIn("slow");
                    lastScrollTop = scrollTop;
                }
            } else {
                lastScrollTop = scrollTop;
            }
        } else { // Scrolling down
            $('#backtotop').removeClass('nav-down').addClass('nav-up');
            $(".toplink").fadeOut("fast");
            lastScrollTop = scrollTop;
        }
    } else {
        $('#backtotop').removeClass('nav-down').addClass('nav-up');
        $(".toplink").fadeOut("fast");
        lastScrollTop = scrollTop;
    }
});

请注意，当窗口向下滚动时，lastScrollTop变量不会更新，超过MIN_SCROLLTOP，但变化不超过MIN_DELTA。

jsfiddle

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

3 个答案:

Fiddle