A Lightweight AutoScroll to Top jQuery Plugin

20. Aug, 2010 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


(function(jq) {
    jq.autoScroll = function(ops) {
        ops = ops || {};
        ops.styleClass = ops.styleClass || 'scroll-to-top-button';
        var t = jq('<div class="'+ops.styleClass+'"></div>'),
            d = jq(ops.target || document);
        jq(ops.container || 'body').append(t);

        t.css({
            opacity: 0,
            position: 'absolute',
            top: 0,
            right: 0
        }).click(function() {
            jq('html,body').animate({
                scrollTop: 0
            }, ops.scrollDuration || 1000);
        });

        $(window).scroll(function() {
            var sv = d.scrollTop();
            if (sv < 10) {
                t.clearQueue().fadeOut(ops.hideDuration || 200);
                return;
            }

            t.css('display', '').clearQueue().animate({
                top: sv,
                opacity: 0.8
            }, ops.showDuration || 500);
        });
    };
})(jQuery);

Plugin in use


$(document).ready(function(){
    $.autoScroll({
        scrollDuration: 2000,
        showDuration: 600,
        hideDuration: 300
    });
});​

The CSS

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

.gp{
    background: #666 url(arrow_up.png) center center no-repeat;
    width: 32px;
    height: 32px;
    color: #fff;
    font-family: verdana;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    margin: 5px;
}​

View DEMO

PG

Author: MaXPert

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

Related Post

Delicious
Tutorials, Works
, ,

11 Responses to “A Lightweight AutoScroll to Top jQuery Plugin”

  1. Yannis Develekos Reply 05. Sep, 2010 at 10:25 am

    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

  2. MaXPert Reply 06. Sep, 2010 at 3:27 am

    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 Reply 06. Sep, 2010 at 3:41 am

      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

  3. Elgart Reply 09. Sep, 2010 at 7:05 am

    Really IE is a headache! Great tutorial indeed!

  4. Jahangir Hussain Reply 21. Jan, 2011 at 2:00 am

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

  5. Chris Raymond Reply 02. Jun, 2011 at 4:29 pm

    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

  6. Oscar Ventura Reply 28. Jun, 2011 at 5:48 pm

    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

  7. la Posicionamiento de web Reply 30. Sep, 2011 at 5:40 am

    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.

Leave a Reply