Create Back to top button using jQuery and CSS
This tutorial helps to create a “scroll to top” button that becomes visible when the user starts to scroll the page. The user scrolls down 100px from the top of the page, then this button will be displayed.
This Back to Top button enhances navigation experience of your website with long pages. After the browser window has been scroll down, a button will automatically appear on the bottom-right corner of the content area. Once this button is clicked, the page will be automatically scrolling up. Through this button, the user can back to the top section from the bottom section of the web page without manual page scrolling. So, the BackToTop button makes the navigation process quicker and easier.
Learn how to create a back to top button with jQuery
This tutorial is very helpful and easy to create a back to top button in your web application. I’ve already done it using jQuery. I will share the example code in this tutorial, but you can give the more colorful affection in the button using CSS or CSS3.
Beneficial of the back to the top button using jQuery
1) The user moves to the page top very quickly from any position of the web page.
Follow The Source Codes
HTML:
Here is the button HTML code. We add a click event and call a function back2Top
<button onclick="back2Top()" id="backBut" title="Back to top">Top</button>
CSS:
Here is the css code for styling the button and positioning the button. You can add your own custom css code to change the style of button.
<style> #backBut{ display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 19px; border: none; background-color: #1d9eab; color: white; cursor: pointer; padding: 15px; border-radius: 7px; } </style>
SCRIPT:
The following script tracks the page scroll and appears the button if the page is scrolled down. Here we add the script. In this script, we call a function (scrollFunction) when a user scrolls. But this function will be called and the button will be shown when the scroll top difference will be more than 100px.
<script> window.onscroll = function(){scrollFunction()}; function scrollFunction(){ if(document.body.scrollTop > 100 || document.documentElement.scrollTop > 100){ document.getElementById("backBut").style.display = "block"; }else{ document.getElementById("backBut").style.display = "none"; } } function back2Top(){ document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } </script>
If you think that, this post is helpful for you, then please share this link on social media.