Search

Sunday, October 4, 2015
0 comments

JQuery: ScrollTop Button in Bottom right corner

11:13 PMSunday, October 4, 2015
Introduction
In this article i will show you how to design Scroll Top button in bottom right corner also when we click on it then we reach at top position of web browser. I will give an example of ScrollTop button which is used to scroll the page at top position.


Description 
First to design the button at bottom right corner using this line of code.

<div align="right">
        <a href="javascript:;" id="scrolltop1">&#x25B2;</a>
    </div>
After that apply formatting on button using css class.

<style>
        #scrolltop1{
            cursor:pointer;
            background-color:#00abcd;
            display:inline-block;
            height:50px;
            width:50px;
            color:#fff;
            font-size:14px;
            text-align:center;
            text-decoration:none;
            line-height:50px;


        }
    </style>

Now, scroll the page using script file, which is mentioned below.
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(function () {
            $('#scrolltop1').bind("click", function () {
                $('html,body').animate({ scrollTop: 0 }, 1000);
                return false;
            })

        })
    </script>
In this script function when we click on hyperlink button, which is mentioned in bottom right corner then run animate function. In animate function we have one property that is scrollTop which is used to scroll the page.

Complete Source code


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>ScrollTop Button in Bottom Right Corner</title>
    <style>
        #scrolltop1{
            cursor:pointer;
            background-color:#00abcd;
            display:inline-block;
            height:50px;
            width:50px;
            color:#fff;
            font-size:14px;
            text-align:center;
            text-decoration:none;
            line-height:50px;


        }




    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(function () {
            $('#scrolltop1').bind("click", function () {
                $('html,body').animate({ scrollTop: 0 }, 1000);
                return false;



            })



        })



    </script>
 
</head>
<body>
   Welcome to dotprogramming.blogspot.com<br/>
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    v
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    Welcome to dotprogramming.blogspot.com<br />
    <div align="right">
        <a href="javascript:;" id="scrolltop1">&#x25B2;</a>
    </div>
</body>
</html>

Protected by Copyscape Online Copyright Protection Software

0 comments :

Post a Comment

 
Toggle Footer
Top