带返回功能的顶部按钮

Question

I try to make "To top" button with return back function:

1. User press button
2. Page scrolls up
3. Button does not disappear
4. If press button again, page scrolls down to position, where user press button first time (step 1).

 $(window).scroll(function() { if ($(this).scrollTop() > 50) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); // scroll body to 0px on click $('#back-to-top').click(function() { $('#back-to-top').tooltip('hide'); $('body,html').animate({ scrollTop: 0 }, 800); return false; }); $('#back-to-top').tooltip('show'); 

 .back-to-top { cursor: pointer; position: fixed; bottom: 20px; right: 20px; display: none; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <br>test <a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"><span class="glyphicon glyphicon-chevron-up"></span></a> </div> </div> 

How can I return back ones?

Answer 1

The below will cover all this important UX cases:

• User manually scrolls down & up : Button disappears if scroll less than 50
• User scrolls down and clicks "To Top" : page animates to top and stores the last known max position. The button once clicked stays always visible.
• User clicks "Back down" : Page animates to the latest known bottom position
• User clicks "To top" and than manually scrolls down surpassing the latest known max position : The "Back down" button automatically renames to "To top" - behaving as expected.
• User clicks "To top", than manually surpasses the max position and than scrolls back manually to top : The button behaves as never clicked.
• (As said, the button automatically changes text)

Try them all:

 const $win = $(window); const $toTop = $('#back-to-top'); const visibleAt = 50; let Y = 0; let clickY = 0; $win.on('scroll', function() { Y = $win.scrollTop(); if(clickY && Y >= clickY) clickY = 0; // In case user surpasses the clickY by manual scroll $toTop .toggleClass('is-visible', !!clickY || Y > visibleAt) .text(clickY ? 'Back down' : 'To top'); }); $toTop.on('click', function(evt) { evt.preventDefault(); $('html, body').stop().animate({scrollTop: clickY ? clickY : 0}); clickY = Y; // Store last click position }); 

 body { height: 400vh; border: 4px dashed #000; } #back-to-top { position: fixed; bottom: 20px; right: 20px; visibility: hidden; opacity: 0; transition: 0.24s; background: #0bf; user-select: none; /* prevent "button" text highlight */ } #back-to-top.is-visible { visibility: visible; opacity: 1; } 

 <a href="#top" id="back-to-top">To top</a> <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 

Additionally you should better use a <button type="button" id="back-to-top">To top</button> instead of a draggable anchor.