In this article I will explain with an example, how to implement Scroll to Top and Bottom of Page with UP and DOWN Arrow Keys using plain jQuery and no additional jQuery Plugins.
The HTML Body element will be assigned jQuery KeyDown event handler and when the UP or DOWN Arrow Keys are detected, the Page will be smooth scrolled to Top or Bottom using jQuery.
In order to make the Scroll 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
The HTML Markup consists of some long Text on the page in order to illustrate Scroll to Top and Bottom of Page with UP and DOWN Arrow Keys.
The HTML Body element will be assigned jQuery KeyDown event handler and when the UP or DOWN Arrow Keys are detected, the Page will be smooth scrolled to Top or Bottom using jQuery.
When the DOWN Arrow key is pressed, the page is scrolled from Top to Bottom using jQuery animate function.
When the UP Arrow key is pressed, the page is scrolled from Bottom to Top using jQuery animate function.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</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 () {
$(window).keydown(function (e) {
var keyCode = window.event ? e.keyCode : e.which;
//UP
if (keyCode == 38) {
$('html, body').animate({ scrollTop: 0 }, 1000);
return false;
}
//DOWN
if (keyCode == 40) {
$('html, body').animate({ scrollTop: $(document).height() }, 1000);
return false;
}
});
});
</script>
</head>
<body>
FIRST<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 />This is sample text<br />
LAST
</body>
</html>
Screenshot
![Scroll to Top and Bottom with UP and DOWN Arrow Keys using jQuery]()
Demo
Downloads
