Actually it is necessary that the button when pressed to have such a view until it disappears at all. enter image description here

The button itself and its functionality, I did this:

$(window).scroll(function() { if ($(this).scrollTop() > 200) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $('.scrollup').click(function() { $("html, body").animate({ scrollTop: 0 }, 600); return false; }); 
 .scrollup { width: 70px; height: 70px; position: fixed; bottom: 140px; right: 0; display: none; text-indent: -9999px; background: #47a759; cursor: pointer; z-index: 9999; } .scrollup:before, .scrollup:after { background: #fff; border-radius: 5px; content: ''; display: block; height: 6px; position: absolute; transform-origin: 4px 4px; width: 25px; left: 12px; top: 32%; margin: auto; } .scrollup:before { transform: translate(21px, 1px) rotate(45deg); } .scrollup:after { transform: translate(18px, 0) rotate(135deg); } 
 <div class="scrollup"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

How to do it all? I would be grateful for the help.

    3 answers 3

    Adding an animate class during animation. Additional styling added to it.

     $('.scrollup').click(function() { var self = this; $(self).addClass('animate'); $("html, body").animate({ scrollTop: 0 }, 600, function() { $(self).removeClass('animate') }); return false; });
    • Thank. Exactly what is needed. - Alexander
     // Scroll to top $('.scrollup').click(function () { $('body,html').animate({ scrollTop: 0 }, 1000); return false; }); 
       $(window).scroll(function() { if ($(this).scrollTop() > 200) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); $('#scroll').removeClass('scrollclick').addClass('scrollup'); } }); $('.scrollup').click(function() { $("html, body").animate({ scrollTop: 0 }, 600); $('#scroll').removeClass('scrollup').addClass('scrollclick'); return false; }); <div class="scrollup" id="scroll"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

      When pressed, classes will change from scrollup to scrollclick , and when raised, vice versa.