Simple jQuery Scroll To Top Solution.

Posted on July 26th, 2015. Written by Dave.

I was looking on the net for a simple scroll to top solution but I kept finding complicated solutions which required images and huge pieces of code.


All I really needed was a button that would fade in once a user began to scroll so I used jQuery scroll function.

The result was a small fixed button at the top right of the page which fades in as a users begins to stroll down the page.

This is very easy to implement into your website, just put the following code anywhere between your <body> tags

<p class="top"> <a style="text-decoration:none; color:#333;" href="#">^ Go To Top ^</a></p>

And put this CSS/jQuery between your <head> tags


<style type="text/css">
.top {
 position: fixed;
 top: 0px;
 border-right-width: thin;
 border-bottom-width: thin;
 border-left-width: thin;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-right-color: #333;
 border-bottom-color: #333;
 border-left-color: #333;
 padding: 5px;
 margin:0px;
 background-color: #CCC;
 color: #333;
 font-weight: bold;
 right: 80px;
 cursor:pointer;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('.top').hide();
$(window).scroll(function () {
$('.top').fadeIn(7000);
});
$('.top').click(function(){
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});
</script>

View Demo

Feedback is always welcome.

This entry was posted on Sunday, July 26th, 2015 at 8:09 pm and is filed under CSS, jQuery. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. You can leave a response, or trackback from your own site.

Dave

Leave a Comment

You must be logged in to post a comment.

Random Ramblings

Looking for a good VPN service?

If you are serious about your online security and safety, you owe it to yourself to be using a trusted VPN. And Torguard is one of the best and most trusted VPN services around. For the best Torguard promo code to save you money, check out domaincouponspro.com