In this short code snippet article I will explain, how to implement Scroll to Bottom Button using jQuery i.e. Smooth Animated Scroll to Bottom of page example using plain jQuery and no additional jQuery Plugins.
In order to make the Scroll to Bottom action smooth, jQuery animation has been used.
jQuery scrollTop
The jQuery scrollTop property is used to set the position of the browser Scrollbar.
The page is scrolled to Top or Bottom position by setting the scrollTop property. When the page has to be scrolled to Top, its scrollTop property is set to Zero and when the page has to be scrolled to Bottom then its scrollTop property is set to the height of the document.
HTML Markup and Implementation
I have added some text to the page so that I can illustrate the Scroll to Bottom of page functionality.
There are two HTML Anchor elements, scrollToBottom for scrolling the page from Top to Bottom and scrollToTop for scrolling the page from Bottom to Top.
When the scrollToBottom HTML Anchor link is clicked, its jQuery click event handler is triggered which scrolls the page from Top to Bottom using jQuery animate function.
When the scrollToTop HTML Anchor link is clicked, its jQuery click event handler is triggered which scrolls the page from Bottom to Top using jQuery animate function.
The CSS styles scrollToTop and scrollToBottom HTML Anchor elements has been defined within the HEAD section of the page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
#scrollToTop, #scrollToBottom
{
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;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
$(function () {
$('#scrollToBottom').bind("click", function () {
$('html, body').animate({ scrollTop: $(document).height() }, 1200);
return false;
});
$('#scrollToTop').bind("click", function () {
$('html, body').animate({ scrollTop: 0 }, 1200);
return false;
});
});
</script>
</head>
<body>
<div align = "right">
<a href="javascript:;" id="scrollToBottom">▼</a>
</div>
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
This is sample text<br />This is sample text<br />This is sample text<br />This is sample text<br />
<div align = "right">
<a href="javascript:;" id="scrollToTop">▲</a>
</div>
</body>
</html>
Screenshot
![jQuery Scroll to Bottom Button: Smooth Animated Scroll to Bottom of page example using jQuery]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
