Javascript-Syntax Hilfe für einen Link nach oben, der nur auf Bildlauf angezeigt wird

Question

Ich habe eine Seite mit einem Link nach oben (in einer ganzen Leiste) Folien am oberen Rand der Seite, nur auf Bildlauf nach oben eingerichtet.

Ich bin ein Anfänger mit Javascript, also habe ich etwas zusammen Cobbled, das funktioniert (es zeigt auf Scroll-up, es sei denn wir sind 500px von oben, verbirgt sich auf Scroll-down), und es verwendet einige Code I von hier aus nicht alle Pixel scrollen zu überprüfen.

Was ich will ist hinzuzufügen, dass, selbst wenn Sie noch Scrollen nach oben, wenn Sie in das Untermenü zu bekommen, dann sollte die toplink wieder die Seite scrollen - Ich habe keinen nach oben müssen, wenn Sie an die sind oben.

Ich habe dies mit einem zweiten JavaScript-Skript zu arbeiten, aber ich weiß, dass es eine viel bessere Möglichkeit, so etwas zum ersten Aufruf arbeiten muss. Auch dieser zweite Aufruf verwendet die window.scroll-Funktion, von der ich mir ziemlich sicher bin, dass sie falsch ist.

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; 

} 

zweite Skript

<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> 

Fiddle mit dem HTML und CSS: https://jsfiddle.net/Lu0jz3nc/11/

Answer 1

Sie sollten mit Hilfe einer globalen Variablen im Fenster Scroll-Handler, dies zu tun, alle in der Lage sein.

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; 
    } 
}); 

Beachten Sie, dass die lastScrollTop Variable nicht aktualisiert wird, wenn das Fenster nach unten, vorbei an MIN_SCROLLTOP gescrollt wurde, aber es war nicht mehr als MIN_DELTA geändert.

jsfiddle

Answer 2

Ich habe Ihre jsfiddle ein wenig geändert, auch wenn es nicht die eleganteste ist oder effiziente Lösung, es funktioniert. Hier https://jsfiddle.net/aedm9cut/

ist die 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(); 
}); 

Dieser Code führt zwei Dinge, wenn Sie vorbei 500px von oben sind und überprüft auch die Richtung Ihrer blättern. Wenn Sie über 500 px sind und scrollen, wird die Leiste angezeigt, andernfalls nicht.

Dieser Code kann verbessert werden, so dass der Code in den Anweisungen if und else nicht jedes Mal ausgeführt wird, wenn der Benutzer scrollt, aber vielleicht können Sie einen Haltepunkt erstellen, den der Code erkennen kann, dass der Benutzer vorbeigegangen ist und dann das ausführen Code einmal. Momentan wird der Code im if/oder else mehrmals während eines Scroll-Ereignisses ausgeführt.

Answer 3

Einfach, rufen Sie die hasScrolled in der onclick Attribut. Jetzt habe ich ein spezielles Argument forceup hinzugefügt, das, wenn es wahr ist, den speziellen Code ausführt, um es zu verstecken. Wenn Sie also auf die Schaltfläche Nach oben klicken, wird es gezwungen, nach oben zu gehen. Der Grund dafür ist window.hasScrolled, um es global zu machen.

window.hasScrolled = function (forceup) { 

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

//Rest of code 
} 

Fiddle