In order to avoid this problem, you have to insert a back-to-top button which assists you to shift efficiently to the start of the page in seconds. As the name of the button implies, whenever clicked then takes your end users back to the start of the page immediately. Back to top button is appropriate for all gadgets and screens. If the web page contains detailed content then including a back-to-top scroll button is strongly suggested.
Scroll back button in JavaScript
A button to get back to the topmost of the web page permits the end users to rapidly get back to the start of the web page without putting forth a lot of attempts. This can be exceptionally helpful when the web page has a ton of content, for instance, when the scroll is used to view content on a one-page site.
Scroll back buttons are mostly placed in the base corner of websites and afterward return you to the start of the page whenever the user clicked on that button. You make this button easily by using JavaScript. We should check out a couple of ways we can create a scroll back button, start with simple implementation, then, at that point, and further develop things as we go.
Now we are going to demonstrate to you a simpler example of how to create a scroll back to the top by using JavaScript.
Example
In this example, we create a button that scrolls back to the beginning of the page. First of all, you need to click on the arrow button then document.documentElement assists you to return to the start of the page. Furthermore, we also add a little bit of styling of the button and insert a click event with the button which helps to scroll to the start of the web page. The code is illustrated below:
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
}
p{
text-align:justify;
padding-left:10px;
}
#backbtn {
background-color: #2596be;
color: white;
text-align: center;
font-size: 30px;
text-decoration: none;
overflow: hidden;
display: none;
cursor: pointer;
position: fixed;
width: 40px;
line-height: 40px;
bottom: 50px;
right: 0;
}
#backbtn:hover {
background-color: #DDF;
color: #000;
}
</style>
</head>
<body>
<button onclick="Scrollback_topfunc()" id="backbtn" title="Scroll back to top">➤</button>
<div style="background-color:#2596be;color:white;padding:30px">You are learning scroll back to top button in javascript</div>
<div style="padding:30px 30px 50px">
<p> <img src="desert.jpg" style="width:40%; height: 40%; float:right; margin: 0 0 0 15px;" alt="desert">Scroll back button in JavaScript
A button to get back to the topmost of the web page permits the end users to rapidly get back to the start of the web page without putting forth a lot of attempts. This can be exceptionally helpful when the web page has a ton of content, for instance, when the scroll is used to view content on a one-page site.
Scroll back buttons are mostly placed in the base corner of websites and afterward return you to the start of the page whenever the user clicked on that button. You can easily make this button by using JavaScript. We should check out a couple of ways we can create a scroll back button, start with simple implementation, then, at that point, and further develop things as we go.
</p>
<br>
</div>
<div style="padding:30px 30px 50px">
<p>
<img src="penguins.jpg" style="width:40%; height: 40%; float:left; margin: 0 15px 0 15px;" alt="penguins">
Scroll back button in JavaScript
A button to get back to the topmost of the web page permits the end users to rapidly get back to the start of the web page without putting forth a lot of attempts. This can be exceptionally helpful when the web page has a ton of content, for instance, when the scroll is used to view content on a one-page site.
Scroll back buttons are mostly placed in the base corner of websites and afterward return you to the start of the page whenever the user clicked on that button. You can easily make this button by using JavaScript. We should check out a couple of ways we can create a scroll back button, start with simple implementation, then, at that point, and further develop things as we go.
</p>
</div>
<script>
var back_top_button = document.getElementById("backbtn");
// Whenever end users scroll down 10px from the beginning of the web page, then back to top button visible
window.onscroll = function() {scrollfunc()};
function scrollfunc() {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
back_top_button.style.display = "block";
} else {
back_top_button.style.display = "none";
}
}
function Scrollback_topfunc() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
Output
Conclusion
JavaScript is the evolving programming language and is used widely by software developers to build intuitive websites. Through this article, you easily learned how to create a scroll back to the top button in JavaScript. We also enlisted a detailed example that assists you to understand the functionality of the scroll back button and how you can use it on your websites.
