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

<div align="right">
<a href=";" id="BottomScrolBar">▼</a>
</div>

<h1>Smooth Animated Scroll to Bottom of page example using jQuery</h1>
<p>
<ul class="alluldata">
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">one page scroll jquery</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">one page scroll css</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">one page scroll jquery example</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">page-scroll bootstrap</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">one page scroll website</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">jquery one page scroll navigation</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">page scroll jquery demo</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">one page scroll javascript</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">bottom to top scrolling jquery</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">scroll to bottom jquery div</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">jquery scroll to bottom of page on click</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">scroll up down jquery example</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">scroll to top button bootstrap</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">scrollbottom jquery</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">jquery scroll to bottom event</a>
<li><a href="https://www.pakainfo.com" title="Development Tools - pakainfo.com">back to top button jquery</a>
</ul>
</p>

<div align="right">
<a href=";" id="TopScrollBar">▲</a>
</div>

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