The following example shows how scroll top will appeared automatically when vertical scroll bar appeared.
Add This in Head Section in Aspx Page:
<style>
.scrollToTop{
width:100px;
height:130px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:465px;
right:40px;
display:none;
background: url('design/Arrow-Up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
text-decoration:none;
}
</style>
<script>
$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function () {
$('html, body').animate({ scrollTop: 0 }, 800);
return false;
});
});
</script>
Add this in Aspx Page:
<a href="#" class="scrollToTop">Scroll To Top</a>
Add This in Head Section in Aspx Page:
<style>
.scrollToTop{
width:100px;
height:130px;
padding:10px;
text-align:center;
background: whiteSmoke;
font-weight: bold;
color: #444;
text-decoration: none;
position:fixed;
top:465px;
right:40px;
display:none;
background: url('design/Arrow-Up.png') no-repeat 0px 20px;
}
.scrollToTop:hover{
text-decoration:none;
}
</style>
<script>
$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function () {
$('html, body').animate({ scrollTop: 0 }, 800);
return false;
});
});
</script>
Add this in Aspx Page:
<a href="#" class="scrollToTop">Scroll To Top</a>
No comments:
Post a Comment