Tutorials, Works

A Lightweight AutoScroll to Top jQuery Plugin

Aug 20, 2010 MaXPert 11 Comments

Increasing your webpage usability is not that easy, you have to consider a lot of things. One of the necessary element is to be able the user to easily back to the top most of the page especially when the content is long enough. This plugin will add an elegant scroll top effect and functionality to you page in just a few line of JavaScript.

The Plugin

Plugin in use

The CSS

A CSS code required for the plugin. In your implementation you need to change the location of the image.

View DEMO

Tags:

About the author: MaXPert

Expert & Freelancer in PHP, MYSQL, Javascript, including many frameworks like codeigniter, cakephp, mootools, jquery, prototype js and a long list.

Related Post

Zemanta

  • Pingback: Tweets that mention A Lightweight AutoScroll to Top jQuery Plugin | INSIC DESIGNS -- Topsy.com

  • Yannis Develekos

    It’s a wonderful script. Thank you very much.
    I have a problem thought. It works fine in every other browser except IE.
    I would appreciate your feedback.

    Thank you in advance,
    Yannis

    • http://maxpert.net.tc/ MaXPert

      IE doesn’t capture scroll event on document object so use

      $(window).scroll(function() {

      instead of

      d.scroll(function() {

      Checkout latest code at http://jsbin.com/udoci/6/edit

  • http://maxpert.net.tc/ MaXPert

    Hey Yannis,

    Thanks for pointing out I’ve already fixed this bug.

    Change the line (line E)

    d.scroll(function() {

    to

    $(window).scroll(function(){

    IE doesn’t capture scroll events on document object.

    You can checkout the real demo here
    http://jsbin.com/udoci/6/edit

    • Yannis Develekos

      Hi MaXPert,
      You are a machine! I checked this out and it works really fine now.

      Let me point out the fact that it is not line E. It is line T… and please let me suggest that you will have to correct the code above so that other developers will not have to check out the comments to find out about the problem.

      ThankS,
      Yannis

  • http://elgartdesigns.wordpress.com/ Elgart

    Really IE is a headache! Great tutorial indeed!

  • http://wetuts.com/ Jahangir Hussain

    Grate tutorial, I am currently in process of implementing in my site. Thanks for sharing.

  • http://www.designtank.ws Chris Raymond

    Hi, I have this working just great on my inside pages, but not on my index page, which also uses mootools for milkbox.js. Any ideas of a way to make this work along with the mootools library? Might it have to do with the order in which I load the js libraries and the scripts?

    TIA

  • http://oava.org Oscar Ventura

    I’m a complete ROOKIE. Can Somebody tell me how or where to place the code for
    “The Plugin”
    “Plugin in use”
    I know the place for this one “The CSS”

    Complete details please.

    Sorry

  • http://www.seo-royal.com la Posicionamiento de web

    Nice tutorial…i was for something like this for one of my website. Goingo to try to build it in right now..thx for a great post.

  • Pingback: Scroll para dezplazamiento hacia la parte superior de una web- ScriptandoBlog