Create a simple scroll to top button
1. Add your button to your markup with the class of scroll-top
<div class="scroll-top">Scroll Up</div>
2. Apply the following CSS to you stylesheet
.scroll-top { padding: 15px 10px; position: fixed; bottom: 25px; right: 25px; display: none; background-color: #000; opacity: .7; color:white; font-family: helvetica, arial, sans-serif; font-weight: bold; }
3. Add the following JavaScript to the bottom of your markup above the closing body tag
$(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('.scroll-top').fadeIn(); } else { $('.scroll-top').fadeOut(); } }); $('.scroll-top').click(function () { $("html, body").animate({ scrollTop: 0 }, 500); return false; }); });
4. Also make sure you are including jQuery in your head section for this to work
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
There you go, you should now have a working scroll to top button.