How to scroll page with jQuery
Every web developer will face with this question some time. Some prefer to create workarounds, some are searching for ready solutions over world wide web. I really like jQuery and use its power and simplicity to perform tasks like scrolling the page down or top to a certain place.
The most problematic question in scrolling the page is cross-browser compatibility. Some new webmasters try to manually (or just using calculators :-)) calculate the exact location of some element, but they always face with glitches of IE using default line-height and its approach resulting in extra spaces, wrong sizes and offsets.
jQuery allows to avoid this problem pretty easily:
<div id="objectid"></div>
<script type="text/javascript">
alert($('#objectid').offset().left); // x coordinate of top left point of the object
alert($('#objectid').offset().top); // y coordinate of top left point of the object
alert($('#objectid').width()); // width of the object in pixels
alert($('#objectid').height()); // height of the object in pixels
Using the offset(), width() and height() methods you can write cross-browser code with accurate object coordinates. You can use window.scroll(x,y) or window.scrollby(x_increment,y_increment) to position visible area of the browser window in the place you need. But that’s also not the easiest solution.
With jQuery.scrollTo plugin the things become as easier as it never could be. Let’s assume you need to make sure the visitor must see the <div> block with some important text, image or any other content. In other words, you need to scroll the page to that element. All you need is to assign an identificator (with jQuery any will work, you can use “id” attribute or assign some class) to the div:
<div class="someClass"></div>
Plug jQuery in the head of the html along with the scrollTo plugin. And plug your javascript (from a separate file or directly from the page)
<head>
<!-- meta tags go here -->
<script type="text/javascript" src="path_to_jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="path_to_plugin_file/jquery.scrollTo-min.js"></script>
<script type="text/javascript">
$().ready(function() {
$.scrollTo($('div.someClass').eq(0), 5000);
});
</script>
</head>
Note: this is just a sample. Don’t copy and paste it completely thinking that it will start working as soon as you do it. You should understand what it does. The first ‘script’ tags include jquery javascript itself, the second ‘script’ tag includes scrollTo jquery plugin. You should download jquery and the plugin first and upload to the server you’re going to work on. Make sure the paths are correct.
Now, let’s see what example does. scrollTo in this example accepts 2 parameters:
1) object identifier, here it is the ‘div’ block with class ‘someClass’, eq(0) means the first found instance (so if there are more ‘<div class="someClass">’ on the page, the second and the rest will be ignored);
2) the number of milliseconds the scroll will take. 5000 means that jQuery will scroll the page for 5 seconds. Usually 1-2 seconds is the best time for this action.
It was easy, wasn’t it? That’s not the only thing, the .scrollTo can do. You can find more details about scrollTo on its homepage. Pretty useful plugin.