Javascript syntax for backlink displayed only when scrolling up

Question

I have a page configured with a link to the top link (in the entire panel), slides down at the top of the page, only when scrolling up.

I start with Javascript, so I put something together, it really works (it shows when scrolling up, if we are not 500px from the top, it doesn’t hide scrolling down), and it uses some code that I got from here to not check the scrolling each pixel.

What I want to add is that even if you are still scrolling, as soon as you get into the submenu, then toplink should scroll the page again - I do not need to return to the top when you are at the top,

I got this by adding a SECOND Javascript script, but I know there must be a much better way to get something like this to work on the first call. Also this second call uses the window.scroll function, which I'm sure is the wrong way to do this.

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

SECOND SCRIPT

  <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 and CSS script: https://jsfiddle.net/Lu0jz3nc/11/

Answer 1

You should be able to do this all in a window scroll handler with a single global variable.

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

Note that the lastScrollTop variable lastScrollTop not updated when the window scrolls down, MIN_SCROLLTOP has passed, but it has not changed more than MIN_DELTA .

jsfiddle

Answer 2

I changed your jsfiddle a bit, although this is not the most elegant or efficient solution, it works. https://jsfiddle.net/aedm9cut/

Here is the 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(); }); 

This code does 2 things, check if you have passed 500px from above, and also checks the direction of your scroll. if you go through 500px and scroll the panel, it is shown, otherwise it will not.

This code can be improved so that the code in the if and else statements does not run every time the user scrolls, but maybe you can set a breakpoint so that the code can detect that the user has passed and then run the code once. Right now, the code in if / or else is executed several times during the scroll event.

Answer 3

Simple, call hasScrolled in the onclick attribute. Now I have added a special forceup argument, which, when true, will run special code to hide it. Therefore, when you press the To Top button, it will make it rise. The reason this window.hasScrolled is is to make it global.

 window.hasScrolled = function (forceup) { if (forceup) { $('#backtotop').removeClass('nav-down').addClass('nav-up'); $(".toplink").fadeOut("fast"); } //Rest of code } 

Fiddle