Back to top button in scroll to top

Asked

Viewed 648 times

1

I have the following question. I created a simple button to go back to the top of the page:

<a href="page-top" class="back-to-top">Back to Top</a>  

    <script>
        $(document).ready(function(){
            var btt = $('.back-to-top');
            btt.on('click', function(e){
                $('html, body').animate({
                    scrollTop:0
                    }, 500);

                    e.preventDefault();
                });

            $(window).on('scroll', function(){
                var self = $(this),
                    height = self.height(),
                    top = self.scrollTop();

                if(top > height){
                    if(!btt.is('#page-top:visible')){
                        btt.fadeIn();
                        }
                    } else{
                        btt.hide();
                        }
                });
            });
    </script>

However I would like to apply the same effect as the facebook button for mobile, where the button will only appear when I scroll up. It’s like?

jquery

2 answers

1

  • 1

    Welcome to Stackoverflow in Portuguese, this sounds more like a comment than an answer, if you don’t have enough points to comment, try to answer some more "concrete" questions and earn points for example. Once you have points you can comment.

0

Yeah, you can do it two ways:

1- Using the attribute delta of the event of scroll:

$('body').bind('mousewheel DOMMouseScroll', function(e){
    if (e.originalEvent.wheelDelta) {
        var delta = e.originalEvent.wheelDelta;
    } else {
        var delta = e.originalEvent.detail * (-40);
    }
    if (delta > 0) {
        // scroll para cima
        $('.back-to-top').fadeIn();
    } else {
        // scroll para baixo
        $('.back-to-top').fadeOut();
    }

Obs.:
DOMMouseScroll and e.originalEvent.detail are for Firefox. (doc)
mousewheel and e.originalEvent.wheelDelta are for other browsers. (doc)

[EDIT]
As @Sergio warned me, the direction of the scroll is different in different browsers and in different OS. So I’ll leave a link here is a great answer to this. But solution 2 remains valid.

2- Holding the position each scroll and comparing with the previous:

var lastScroll = 0;
$(window).scroll(function(e){
    var currentScroll = $(this).scrollTop();
    if (currentScroll < lastScroll){
        // scroll para cima
        $('.back-to-top').fadeIn();
    } else {
        // scroll para baixo
        $('.back-to-top').fadeOut();
    }
    lastScroll = currentScroll;
});

Comparison

As a matter of performance, I can’t answer you, but I don’t think there’s much difference.
In solution 1, both events are not standardized, so they should be well tested in different browsers.
Solution 2 would be the most "manual" and perhaps the most obvious of thinking.
For your problem, I would use solution 2, which is simple and sure to work in any environment.

  • Note that the direction of the scroll is different in different browsers. -> http://answall.com/a/25221/129

  • I didn’t know that. I’ll test it better and edit the answer.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.