How to make a back-to-top-button which appears just by scrolling up?

Question

I have a back-to-top-button on my website. And I know how to do it that the button appears by scrolling some pixel down.

$(window).scroll(function() {
    if ($(this).scrollTop()) {
        $('#toTop').fadeIn();
    } else {
        $('#toTop').fadeOut();
    }
});

$("#toTop").click(function () {
   $("html, body").animate({scrollTop: 0}, 1000);
});

#toTop {
    padding: 5px 3px;
    background: #000;
    color: #fff;
    position: fixed;
    bottom: 0;
    right: 5px;
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='toTop'>to-top!</div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.   

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.   

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.   

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>

I want the To-Top-Button just appear if I scroll up or if I reach the bottom of my website. Is this possible? Or do I have to say at which position the button should appear?

score 1 · Accepted Answer · answered Aug 21 '17 at 12:23

you can use this technique documented here for detecting scrolling direction: https://stackoverflow.com/a/4326907/5308409

and you can combine it with an if statement that checks if the current scroll position is equal to the window's height. just like that:

https://stackoverflow.com/a/3898152/5308409

score 0 · Answer 2 · answered Aug 21 '17 at 12:28

I think this is what you need. We keep track of the last scroll value, so we can tell if it's a scroll up or scroll down.

let currentScroll = $(this).scrollTop();
if (currentScroll > scrolled) {...}

Then we also check if we reached the end of the page.

if ($(window).scrollTop() + $(window).height() == $(document).height()) {...}

Also, don't forget to update the last scrolled value.

https://jsfiddle.net/25k3g4c3/

score 0 · Answer 3 · answered Aug 21 '17 at 13:11

Check this fiddle: http://jsfiddle.net/ManuelDavid325/rncv6038/

var lastScrollPosition = $(window).scrollTop();
var _scrollTopMargin = 10; // Save the original value
var scrollTopMargin = _scrollTopMargin;
$(window).scroll(function() {
    // Detect if has scrolled up
    if($(window).scrollTop() < lastScrollPosition - scrollTopMargin){
        $('#toTop').fadeIn();
        scrollTopMargin = 0;
    } else {
        $('#toTop').fadeOut();
        scrollTopMargin = _scrollTopMargin;
    }

    // Detect if has reached the bottom
    if( $(window).scrollTop() >= $("body").outerHeight() - $(window).outerHeight()){
        $('#toTop').fadeIn();
        scrollTopMargin = 0;
    }
    lastScrollPosition = $(window).scrollTop();
});

$("#toTop").click(function () {
   $("html, body").animate({scrollTop: 0}, 1000);
});

I hope this works.

DarkMukke · Answer 4 · 2017-08-21T12:35:06.143

https://www.w3schools.com/howto/howto_js_scroll_to_top.asp

With some small adaptions to their script you have your result.

<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

var lastScrollTop = 0;
function scrollFunction() {
    var st = $(this).scrollTop();

    if (st + $(window).height() === $(document).height() || st < lastScrollTop) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }

    lastScrollTop = st;
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
    lastScrollTop = 0;
}
</script>

Sources:
How can I determine the direction of a jQuery scroll event?
Check if a user has scrolled to the bottom

So to put that in your script

var lastScrollTop = 0;
$(window).scroll(function() {
    var st = $(this).scrollTop();

    if (st + $(window).height() === $(document).height() || st < lastScrollTop) {
        $('#toTop').fadeIn();
    } else {
        $('#toTop').fadeOut();
    }
    lastScrollTop = st;
});

$("#toTop").click(function () {
    $("html, body").animate({scrollTop: 0}, 1000);
    lastScrollTop = 0;
});

I want the button to appear when I scroll UP. Anywhere at my page. NOT when I scroll 20px down. — Paili, Aug 21 '17 at 12:20
ok my answer was a bit rude, I adjusted the script to do exactly what you wanted (granted I used jQuery) but the functionality should be clear, the edits I did are both found on stack overflow. — DarkMukke, Aug 21 '17 at 12:24
for clarification, my answer was rude because I did all this with 3 google searches, and coding is not just posting stuff on SO and expecting the perfect solution, with zero effort. — DarkMukke, Aug 21 '17 at 12:33
thanks for your answer. Ok, but I don't want full functional code here. Just some inspiration. By the way it don't work right. You invert it again. — Paili, Aug 21 '17 at 12:42

How to make a back-to-top-button which appears just by scrolling up?

4 Answers4