Saturday, June 8

How to Scroll Page from Top to Bottom and from Bottom to Top Using Jquery/Javascript

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 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.

ShibashishMnty
shibashish mohanty