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


one page scroll jquery
one page scroll css
one page scroll jquery example
page-scroll bootstrap
one page scroll website
jquery one page scroll navigation
page scroll jquery demo
one page scroll javascript
bottom to top scrolling jquery
scroll to bottom jquery div
jquery scroll to bottom of page on click
scroll up down jquery example
scroll to top button bootstrap
scrollbottom jquery
jquery scroll to bottom event
back to top button 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!.