How to Create back to Top Button in our Website?
Scroll Button Back to Top is very important for a website. It gives a very good user interface, and the user doesn't need to too much scroll to go to the top of the page.
 |
| Add jQuery ScrollTop & Scroll button top | CodingTuting | Image By mmi9 from Pixabay |
Here we have a very simple method to add Scroll Top button our website.
We will make a back-to-top button using HTML, CSS, and jQuery. We'll use "jQuery scrollTop()" method for this. It is very easy.
Follow the below step to create a "scroll to top jquery"
<button id="top-btn"> Top </button>
You can use any icon or symbol instead of the button text "Top"
Step 2
Add CSS to give style to the Scroll-Top button
<style>
html
{
scroll-behavior: smooth; /*Mandatory for smooth scroll*/
}
#top-btn
{
position: fixed; /* Mandatory */
right: 20px; /* Mandatory */
bottom: 20px; /* Mandatory */
padding: 9px; /* Mandatory */
border-radius: 5px;
color: #fff;
background-color: #5089b9;
border: none;
display:none;
}
button#top-btn:hover
{
background-color: #2978bb;
}
</style>
You can modify the style of the button according to your website theme.
Step 3
Add jQuery before closing the </body> tag
<script data-src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
Note - Don't add jQuery again if you've added already.
Step 4
Add this jQuery code before closing the </body> tag
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() >= 500) /* Set limit according to your need */
{
$("#top-btn").fadeIn();
$("#top-btn").click(function(){
$(window).scrollTop(0);
});
}
else
{
$("#top-btn").fadeOut();
}
});
});
Thanks for Reading
EmoticonEmoticon