Transition to a scroll back to top button
Question
I created a button on my site to scroll back to the top of my page by following this tutorial: W3Schools
The problem is that when you click on the button, there is no transition to the top, you are just "teleport" to the top of the page. So if someone will know how to improve the transition or how to make a button otherwise.
HTML code:
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
CSS code:
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
}
#myBtn:hover {
background-color: #555; /* Add a dark-grey background on hover */
}
JavaScript code:
//Get the button:
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; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
3 answers
solution1
2 2020-06-25 09:51:02
You can do this either by adding scroll-behavior: smooth; to your html styles or by using the window scrollTo method with the option behavior: 'smooth' in your Javascript :
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
solution2
1 2020-06-25 09:51:19
try this in your topFunction() , it should work definitely. You can set a callback function for the animate command. I have tested in my localhost and it works like a charm. Hope that will help you.
function topFunction() {
var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() {
console.log("Animation has finished");
});
}
solution3
0 2020-06-25 10:06:19
Follow the structure that I given below.
<!Doctype html>
<html>
<head>
<!--Add the CSS Code here-->
<style>
</style>
</head>
<body>
<!--Add more text here-->
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum....</p>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
</body>
<script>
<!--Add the JavaScript Code here-->
</script>
</html>```
Then just run the code.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.