Back to Top using Button with jQuery and CSS

Submitted by alpha_luna on Friday, September 2, 2016 - 15:34.

Back to Top using Button

In this tutorial, we are going to create Back to Top using Button with jQuery and CSS. This project is going to show you on how to create a "back to top" button to scroll your page smoothly to the top. This can be useful if you have long scrolling pages to allow the users to navigate. This tutorial, we’ll show you how to create and the uses of Back to Top Button. It helps the user to scroll up the page by clicking the button. When the user scrolls down the web page or navigate the page, it will automatically appear the Back to Top Button on the right side of the web page and once the button is clicked by the user then the web page will automatically smoothly scrolling up. You can also check the live demo of this simple tutorial, so you can get an idea and you can try this out, let's start coding.

Creating Markup with simple Content This is our simple content in the web page.

<a href="#" id="scroll_to_top" title="Scroll to Top" style="display: none;">Top<span></span></a>
 
<h1>Back to Top using Button with jQuery and CSS</h1>
 
<h3>Scroll down the page, the button would be appear at the right side corner.</h3>
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat lacus tortor, et eleifend turpis consectetur non. 
Donec felis purus, luctus eget ornare non, elementum ut diam. Phasellus sollicitudin justo ac nulla viverra, vel dapibus nisl sagittis. 
Sed sed enim non lorem dictum volutpat. In hac habitasse platea dictumst. Quisque tellus neque, condimentum sit amet mattis et, fringilla 
sit amet odio. Donec velit libero, dictum vitae interdum a, sollicitudin ac ipsum. Ut tincidunt, dui at interdum placerat, nunc sapien dictum 
dolor, sit amet suscipit mi erat at enim.</p>
 
<p>Proin ut turpis eget dolor consequat convallis vitae nec tortor. Maecenas pellentesque tortor eu enim commodo, nec facilisis elit imperdiet. 
Quisque imperdiet ex magna, vel finibus nibh dapibus ut. Vivamus non arcu euismod ligula lacinia tristique. Nunc vestibulum malesuada pharetra. 
Ut suscipit, felis ac ornare semper, justo nulla pharetra nunc, vitae interdum massa nisi ut magna. Praesent cursus dolor diam, sit amet porttitor 
leo semper id. Aenean convallis scelerisque ante, quis eleifend eros tincidunt eget. Curabitur cursus neque ac sem suscipit lobortis. Sed sed odio 
tempus, laoreet sapien sit amet, maximus nisi.</p>
 
<p>Nulla porttitor erat et vulputate porta. Vestibulum at arcu lectus. Cras tincidunt, leo ac porttitor dignissim, odio enim mattis lorem, eget placerat 
eros ipsum sed odio. Sed ullamcorper ligula neque, non condimentum lectus egestas sed. In sit amet mauris non ligula finibus tempus. Maecenas mi felis, 
commodo vitae libero ac, bibendum tempor lorem. Suspendisse iaculis porta urna. Maecenas sit amet condimentum sapien. Cras eu porttitor odio. Fusce vulputate gravida rhoncus.</p>
 
<p>Nulla sapien tellus, venenatis et libero eget, posuere viverra augue. Phasellus lectus ipsum, vestibulum quis magna at, dignissim euismod mi. Praesent 
laoreet ipsum ut enim luctus laoreet. Phasellus congue nulla et nulla porttitor, vel facilisis tortor tincidunt. Nulla malesuada nec lorem id porttitor. Nam 
sem ipsum, volutpat in pellentesque eu, sollicitudin vel velit. Curabitur orci mauris, ullamcorper id nunc non, sollicitudin accumsan erat.</p>
 
<p>Vestibulum luctus cursus ligula at consectetur. Sed interdum eget dolor vel gravida. Donec euismod vehicula hendrerit. Nam suscipit pulvinar interdum. 
Quisque dictum ut quam quis euismod. Donec id tempor felis. Phasellus gravida, est faucibus lobortis facilisis, leo ligula dictum velit, vitae iaculis ante 
nisi eget quam. Mauris sit amet ipsum sed ligula cursus facilisis vitae ut urna. Phasellus viverra nisi at pretium lacinia. Nunc placerat turpis non velit 
vestibulum pellentesque. Sed tincidunt odio lectus, in dapibus ligula placerat sed.</p>

Creating simple jQuery script to scroll up smoothly the web page. Kindly copy and paste to the HEAD tag of your Web Page.

<script type='text/javascript'>
$(document).ready(function(){ 
        $(window).scroll(function(){ 
                if ($(this).scrollTop() > 100) { 
                        $('#scroll_to_top').fadeIn(); 
                } else { 
                        $('#scroll_to_top').fadeOut(); 
                } 
        }); 
        $('#scroll_to_top').click(function(){ 
                $("html, body").animate({ scrollTop: 0 }, 600); 
                return false; 
        }); 
});
</script>

Output

Note: You can customize your Back to Top Button whatever your desired design by changing the CSS. That's it, kindly click the "Download Code" button below for the full source code. Enjoy coding. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

39 views