Scroll to Top effect using jQuery

        Many of us have been using jQuery lately, but as it goes i was very much contend with using javascript, much because of learning another language. Then i had to use jQuery for one of my company projects, and alas i hoped that i had learned jQuery much earlier. 

        jQuery is a simple and tiny javascript framework which provides you with custom functions which may take days to code in native javascript. Here is one of the easy and small example of jQuery that i learned during the project. This will give you an insight of how much simpler jQuery is. You can freely download jQuery from here.

        In informational sites you might have seen a 'Top' link which actually moves you to the top of the web page. This link actually links to the '#top' html anchor which signifies the top of the body. Though helpful it is a bit old and abrupt. How about we replace it with a animated scroll to top button?

Using the old approach, you can place the below code in your body tag.
<a href="#top"><img src="top.jpg" alt="back to top"/></a>
        Clicking on this link will take you to the top of the page. (Make sure the page spans more than the browser window, so that the scrolls are enabled and you can see the result. Also place the link somewhere at the end of the page.)

You can use this sample image. 

        Now we will do with jQuery with an added scrolling effect. First create a div (somewhere at the end of page) and place the image in this div. Clcking on this image will scroll you to the top of the page.
<div id="topArrow"> <img src="top.jpg" alt="scroll to top" /> </div>

Now the jquery part,
$(document).ready(function() {
    // function for scrolling the body to top.
    $('#topArrow').click(function () {

        // animate the page to scroll to top when the link is clicked
        $('body,html').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });
});
        When the 'topArrow' div is clicked, it will animate the body  by scrolling it to the top. We use jQuery's 'animate' function for this. The first parameter to animate method denotes the properties or simply the type of animation (we can also have fade, opacity,left etc). The second parameter denotes duration of animation. Other optional parameters include ease and function to call once the animation is complete. Detailed info for 'animate' function can be found from here.

        If you want to the arrow link to be always displayed at the bottom of the page, rather than placing it in the page, the following css enables you to do so.
/* Style for the arrow link */
#topArrow {
 position:fixed;
 bottom:0%;
 left:75%;
 display: block;
 padding:20px;
}
The position:fixed css attribute let the image to stay fixed at the bottom the page.

Note: In some IE versions the position:fixed attribute doesn't work properly and the link will remain at top of the page. Place the below Doctype declaration on the top of the page code (above html tag), to resolve this problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        If you are not into coding or want a simpler solution you can try the UItoTop jQuery Plugin. It’s easy to setup with only one line of code, and it works cross-browser nicely.

You can download the code for this post from here.
Thats all for this post. Will be back with more interesting jQuery snippets.

0 comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...
 

Copyright © 2012 | ScriptSplash | Powered by Blogger Templates