Simple jQuery Scroll To Top Solution.
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.
