jQuery Smooth Animate Scroll to Bottom of page

jQuery Smooth Animate Scroll to Bottom of page

Today, We want to share with you jQuery Smooth Animate Scroll to Bottom of page.
In this post we will show you jQuery Smooth Animate Scroll to Bottom of page, hear for jQuery Smooth Animate Scroll to Bottom of page we will give you demo and example for implement.
In this post, we will learn about jQuery Smooth Animate Scroll to Bottom of page with an example.

Description: The Get the current windows vertical position of the scroll top to bottom bar for the Top element in the set of matched class,id,tag or section elements or set the vertical same position of the scroll bar for every matched HTML element.

The scrollTop() jquery method sets all position or returns the vertical scrollbar same position for the selected HTML elements.

Syntax of the scrollTop()

 $(yourselector).scrollTop();
//or
 $(yourselector).scrollTop(position);

Basic Example

$(".classname").click(function(){
    alert($("#idname").scrollTop());
}); 

Scroll to top : index.html


Smooth Animated Scroll to Bottom of page example using jQuery

Jquery Script

  
    
        $(function () {
            $('#BottomScrolBar').bind("click", function () {
                $('html, body').animate({ scrollTop: $(document).height() }, 1200);
                return false;
            });
            $('#TopScrollBar').bind("click", function () {
                $('html, body').animate({ scrollTop: 0 }, 1200);
                return false;
            });
        });
    

Scroll to top : CSS

body
{
	font-family: Arial;
	font-size: 10pt;
	background-color:#FAFAFA;
}
#TopScrollBar, #BottomScrolBar
{
	 cursor:pointer;
	 background-color:#0090CB;
	 display:inline-block;
	 height:40px;
	 width:40px;
	 color:#fff;
	 font-size:16pt;
	 text-align:center;
	 text-decoration:none;
	 line-height:40px;
}
.alluldata > li{
	padding:10px;
	color:red;
	list-style-type: square;
	font-size:16pt;
}

Here Is Working Example :

View Demo

We hope you get an idea about jQuery Smooth Animate Scroll to Bottom of page
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Leave a Comment