How to make "scroll to top" JS function go slower in JQuery-CodePudding

How can I edit this code from W3 schools to make it scroll slower by only using JQuery? It currently just jumps to the top. Is there a way to slow it down so the user can see that they are actually going back up to the top of the page? Ideally the entire thing should be in JQuery if possible.

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top

//Get the button
var mybutton = document.getElementById("myBtn");

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

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

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

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible 
  <strong>when the user starts to scroll the page</strong>.</div>

CodePudding user response：

Edit for Pure jQuery

You're looking for the jQuery .animate() method. Check out:

https://www.w3schools.com/howto/howto_css_smooth_scroll.asp#section2

They're using this.hash to find the destination of the smooth scroll. You can omit it, and replace with '0' for scroll-to-top. If you're new to this.hash, look at:

How does $(this.hash) work?

Add jQuery to your html head with:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

and replace your topFunction with:

function topFunction() {
 
    $('html, body').animate({
        scrollTop: 0
      }, 500);
}

'500' is the duration of the scroll animation in milliseconds.

CodePudding user response：

You can try using scrollTo with the smooth behavior https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo#examples

Though it doesn't work on Safari (I see it works only from Safari 14 and on now), for safari you need to add a polyfill https://github.com/iamdustan/smoothscroll

CodePudding user response：

Just expand your scrollTop call like that:

window.scrollTo({top: 0, behavior: 'smooth'});