Introduction:-
In this article i have
explained How to Scroll Page from top to bottom and from bottom to top
using Jquery/Javascript.
Description:-
In my previous article
,i have explained How to Bind State by Selecting Country DropDownList using
WebMethod in Asp.net , How to Upload and Save Image Without any Postback by User in
Asp.net ,How to Save Image in Different Size in Asp.net , Encription and Decription of Password In Asp.net C# ,Send sms to mobile in asp.net using fullonsms free api , Send free sms using asp.net source code .
In this article i have created one aspx page and has taken three
html div where ID as top,div1 and div2 in three different background color for
distinguish each other.I have taken three contents for this example but you can
take as many contents you want.Created one javascript function and called this
function dynamically in jquery click event.
I
have explained it in the following code,You can test it in your own by copying
all the code from below.
Here is My Sourcecode:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function scrollToBottom(id) {
div_height = $("#" + id).height();
div_offset = $("#" + id).offset().top;
window_height = $(window).height();
$('html,body').animate({
scrollTop: div_offset - window_height + div_height
}, 'slow');
}
$(document).ready(function () {
top.location.href = '#top';
$('.div1').click(function () {
scrollToBottom('Div1');
});
$('.div2').click(function () {
scrollToBottom('Div2');
});
$('.top').click(function () {
scrollToBottom('Div1');
//
$('html, body').animate({ scrollTop: $(document).height() - $(window).height() }, 1000,
function () {
// $(this).animate({ scrollTop: 0 }, 1000);
// });
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="top" style="background-color: #00CC00">
<p>Hi i am shibashish mohanty working as a software engineer explained
here scroliing of page using jquery.You can put your content here</p>
<asp:Label ID="Label1" class="div1" runat="server" Font-Underline="True" ForeColor="#0066FF"
Text="More"></asp:Label>
</div>
<div id="Div1" style="background-color: #990000">
<p>Similarly you can put your second content here,i am providing
some dummy text here by which i can make you visible the actual
effects. </p>
<asp:Label ID="Label2" class="div2" runat="server" Font-Underline="True" ForeColor="#0066FF"
Text="More"></asp:Label>
</div>
<div id="Div2" style="background-color: #FF66FF">
<p>Here you can put your third content here,I am taking here only
three contents you can take as many as you want.</p>
<asp:Label ID="Label3" class="top" runat="server" Font-Underline="True" ForeColor="#0066FF"
Text="Top"></asp:Label>
</div>
</form>
</body>
</html>
Hope you
will like this article.Any comments for this article is most welcome.For more
information you can visit my previous post as mentioned above.
Thanks Shibashish Mohanty
No comments:
Post a Comment
Please don't spam, spam comments is not allowed here.