Its always useful for your visitors to be able to move around your site with ease, so lets say you have a one page website or quite indepth pages which are long, Instead of making your visitors scroll back up, you can add a very simple back to the top button at the bottom of you page!
So first we should do the HTML link for your back to the top, You have many options for example:
You could have it as a link:
Back to the top
<a href="#" id="back-to-top-text" title="Back to top" href="#">Back to the top</a>
You could have as a button
<a href="#" id="back-to-top-button" title="Back to top" href="#">Back to the top</a>
You could have it as an arrow
<a href="#" id="back-to-top" title="Back to top" href="#">↑</a>
You can design it any way you want!
I like to place this just before I call my footer.
So once our Div is in place we need to put our CSS in,
So for the button I would have
#back-to-top-button { position: fixed; bottom: 40px; right: 40px; z-index: 9999; text-align: center; background: #ff0000; color: #f5f5f5; Padding:10px 18px; border-radius:7px;} #back-to-top-button:hover { background: #0093dd; } #back-to-top-button.show { opacity: 1; }
and for the arrow I would have:
#back-to-top{ position: fixed; bottom: 40px; right: 40px; z-index: 9999; Padding:10px 18px; text-align: center; line-height: 30px; background: #777777; color: #f5f5f5; cursor: pointer; border: 0; border-radius: 2px; text-decoration: none; transition: opacity 0.2s ease-out; opacity: 0; } #back-to-top:hover { background: #e9ebec; } #back-to-top.show { opacity: 1; }
Then the JQUERY
Change #back-to-top to #back-to-top-button if you are using the button code from here.
if ($('#back-to-top').length) { var scrollTrigger = 100, // px backToTop = function () { var scrollTop = $(window).scrollTop(); if (scrollTop > scrollTrigger) { $('#back-to-top').addClass('show'); } else { $('#back-to-top').removeClass('show'); } }; backToTop(); $(window).on('scroll', function () { backToTop(); }); $('#back-to-top').on('click', function (e) { e.preventDefault(); $('html,body').animate({ scrollTop: 0 }, 700); }); }
Dont forget to include your JQUERY library!
Thats pretty much it