JQuery: ScrollTop Button in Bottom right corner

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>

Comments

Popular posts from this blog

difference between structure and union in C Language

Difference between Linear search and Binary Search in c language

Difference between static and dynamic websites