Create a page Scrool.aspx
Copy this and paste.
Download Jquery
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Scrool.aspx.cs" Inherits="ProgramFiles_Login_Scrool" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Smart Scrolling: by Nitish Kumar</title>
<script src="../../Resources/JSFiles/jquery-1.4.1.min.js" type="text/javascript"></script>
<%-- 1. It scroll window bottom to top directly--%>
<%-- <script type="text/javascript">
$(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() < 500) {
$('#Icon') .fadeOut();
} else {
$('#Icon') .fadeIn();
}
});
$('#Icon').on('click', function(){
$('html, body').animate({scrollTop:0}, 'fast');
return false;
});
});
</script>--%>
<%-- 2. It scroll window bottom to top but ony by one div.--%>
<script type="text/javascript">
$(document).ready(function($){
var ar = new Array();
var offset= 400;// distance form top.
var duration=500;// time to fadeIn or fadeOut.
$(window).scroll(function(){
$("div[id*='divScr']").each(function() {// It will find divs whose name like 'divScr'.
var divLeft = $(this);
var position = divLeft.position().top - $(window).scrollTop();
if (position < 0)
{
ar.push(divLeft.attr('id'));
}
// else
// {
// ar.pop();
// }
});
if ($(this).scrollTop() >= offset) {
$('#Icon').fadeIn(duration);
}
else {
$('#Icon').fadeOut(duration);
}
});
$('#Icon').click(function(event) {
event.preventDefault();
var divLeftTopid =ar.pop();
var divLeftTopPosition = $('#' + divLeftTopid).offset().top - 60;
$('html, body').animate({ scrollTop: divLeftTopPosition }, duration);
return false;
});
});
</script>
<style type="text/css">
.divs
{
height: 500px;
}
#Icon
{
height: 30px;
width: 30px;
position: fixed;
bottom: 20px;
right: 0px;
text-indent: -999px;
display: none;
background: url( "1381592590_27881.ico" ) no-repeat; /* Note: Icon or Images size should be small as possible. */
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}
#Icon:hover
{
-webkit-transform: rotate(360deg);
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; float: left;">
<div class="divs" id="divScr1" style="border: 1px solid red; margin-bottom: 5px;">
One
</div>
<div class="divs" id="divScr2" style="border: 1px solid blue; margin-bottom: 5px;">
Two
</div>
<div class="divs" id="divScr3" style="border: 1px solid green; margin-bottom: 5px;">
Three<img src="arrow_up_alt1-128.png" height="40px" width="40px" />
</div>
<div class="divs" id="divScr4" style="border: 1px solid gray; margin-bottom: 5px;">
Four
</div>
<div class="divs" id="divScr5" style="border: 1px solid purple; margin-bottom: 5px;">
Five
</div>
</div>
<a href="#top" id="Icon" title="Back to top"></a>
</form>
</body>
</html>
Cheers!!!
No comments:
Post a Comment