thebeebs | How to scroll the browser using JQuery
thebeebs
Learn the art of website security
 
 

How to scroll the browser using JQuery

by thebeebs 3. November 2010 19:26

I was looking at the website http://forrst.com/ and loved the way that they hide the registration screen just below the fold of the front page. When you click on the apply now button the screen scrolls.

I quickly whipped up the following guide to show how easy it is to implement. You can see the demo in action here http://bit.ly/cRKnm4

 

Step 1

Add the JQuery Library to your webpage. In the demo I have used the Microsoft Hosted version of the Library, you just need to add the following code to the head section of your website:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" language="javascript" type="text/javascript"></script>

Step 2

Add the page HTML.

I added two DIV layers to my page and gave them the ID mainContent and regSection. In the Main content DIV I have added an A tag that has an onClick event called scrollScreen, scrollScreen has one argument; the object that is making the request.

The A tag should have a HREF attribute which contain the ID of the registration element preceded by the # symbol. This will be used later to figure out where the registration DIV is on the page and  then scroll the browser to that point.

<div id="mainContent">Content Section&nbsp; - <a href="#regSection" onclick="scrollScreen(this)">Click Me to Scroll the Page</a> </div> <div id="regSection">Registration Section&nbsp;</div>

 

Step 3

Add some CSS to style your page. In my example I used really simple colours to illustrate the different sections of the webpage.

<style> body, a { color: #fff; font-size: 20pt; font-family: Arial; margin: 0px; padding: 0px; } #mainContent { position: relative; display: block; width: 100%; height: 1000px; background-color: #336699; } #regSection { position: relative; display: block; width: 100%; height: 1000px; background-color: #FFF000; color:000; } </style>

 

Step 4

When the user click the link they will fire the scrollScreen event so it is probably a good idea to add the function to the page.

The scrollScreen event takes the element that was passed to it and looks at it HREF attribute.

This attribute is then used to determine the target position or in other words the position of the registration section.

Then with a little JQuery animation magic we scroll the browser to the target position.

<script> function scrollScreen(element) { // It neater if we get the target from the href of the link var targetHref = $(element).attr("href"); // The location of the target div layer in relation to the browser window var targetPostion = $(targetHref).offset().top; // The speed of the animation in millisenconds var speed = 250; var selector = "html:not(:animated),body:not(:animated)"; // We then use the animation function to scroll the main window $(selector).animate({ scrollTop: targetPostion }, speed); } </script>

 

That's it. It really couldn’t be any easier.

Tags:

Comments are closed