Scroll To Top with Jquery

by Rajdeep Chandra

HTML

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  <a href="#top" class="topslide">Go To Top</a>

CSS

.topslide{
  position: fixed;
  width:20%;
text-align: center;
line-height: 47px;
font-size: 1.5em;
right:0px;
left: 0px;
margin: 0 auto;
bottom: 20px;
background: rgba(23,151,206,0.8);
color: #fff;
display: none;
box-shadow: 0 10px 10px rgba(0,0,0,0.19);

}

JavaScript

$(document).ready(function(){
$("a[href='#top']").click(function () {
	$("html, body").animate({ scrollTop: 0 }, "slow");
	return false;
});
$(window).scroll(function () {
	var pos = $(this).scrollTop();
  if (pos > 500) {
		$('.topslide').show();
	}
	else {
		$('.topslide').hide();
	}
});
});