6

I have a page set up with a back to top link (in an entire bar) slides down at the top of the page, only on scroll up.

I'm a beginner with Javascript, so I have cobbled something together, that does work (it shows on scroll up, unless we're 500px from the top, hides on scroll down), and it uses some code I got from here to not check every pixel scrolled.

What I want to add is that even if you are still scrolling up once you get to the submenu, then the toplink should scroll off the page again - I don't need a back to the top once you are at the top.

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

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>

Fiddle with the HTML and CSS: https://jsfiddle.net/Lu0jz3nc/11/

Improve this question
3
  • Try running hasScrolled when you click the to top button Commented Apr 25, 2015 at 0:13
  • thanks vihan however I really am a beginner, I have no idea how/what do to that! could you give me an example? Also, this is not something I want to happen on click. I just want the back to top link to disappear if they keep scrolling at get to the top. Commented Apr 25, 2015 at 0:18
  • Something like this ? Commented Apr 25, 2015 at 0:25

3 Answers 3

Reset to default
2

I've modified your jsfiddle a bit, albeit it's 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 are past 500px from top and also checks the direction of your scroll. if you are past 500px and are scrolling up the bar will show, otherwise it won't.

This code can be improved so that the code in the if and else statements aren't run every time the user scrolls, but perhaps you can make a breakpoint that the code can detect the user has gone past and then run the code once. Right now, the code in the if/ or the else is run several times during a scroll event.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You should be able to do this all in the window scroll handler, with the help of one 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; } });

Notice that the lastScrollTop variable is not updated when the window has been scrolled down, past MIN_SCROLLTOP, but it has not changed more than MIN_DELTA.

jsfiddle

Improve this answer

3 Comments

Thanks John S. This mostly works and seems to be a better solution that what I had. However, in my working site (which I can't share unfortunately), the submenu appears at varying heights on the screen. This solution is removing the back to top banner when i'm about 200px ish from the top of the screen. I'd like it to be removed when I hit the submenu. The submenu is changed to sticky when it hits the browser window, then unsticks again when you browse up again. I'll update the jsfiddle again shortly. I've tried changing MIN_SCROLLTOP to $('#subMenu').offset().top but no joy
jsfiddle.net/Lu0jz3nc/14 Updated jsfiddle showing the subnav sticking to the top.
@RachelLIlburn - I'm not seeing the subnav stick in the jsfiddle.
1

Simple, call the hasScrolled in the onclick attribute. Now I've added a special argument forceup which when true will run the special code to make it hide. So when you click the To Top button, it will force it to go up. The reason it is window.hasScrolled 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

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.