jquery

jQuery scroll to top animation (scrollTo plugin)

It’s the little things on sites that often make you want to return. I am a massive fan of sites that feel light and free. Where when you click on things, it does things you don’t always expect or aren’t programmed in your mind to accept will happen. Things where you think “That’s a nice touch, why didn’t I think of that?”

So onto my point, here is a little touch that I often add to sites that I like to see happen. It’s simply having a ‘Back to top’ button at the foot of the page that once clicked, scrolls you up with an animation rather that a page refresh or a straight jerk to the top again.
Using the jQuery scrollTo plugin, you can achieve, what I see to be, a sweet scrolling animation.

Implementing scrollTo to scroll to top using jQuery

I’ll briefly outline the steps you will need to take to implement this, but more documentation and some better example can be found on the plugin site.

1. Download the js file that you will need and stick it in your site somewhere.
2. Include the js file into the page you want it on.
3. Initialise the function, so that when the link is clicked, it will perform the animation you want, with the speed you set and where you want it to scroll to. Then add the link you want to move you to the top.
Here is an example of the code you might use to do this:

<script type=“text/javascript” src=“js/jquery.scrollTo.js”></script>
<script type=“text/javascript”>
$(document).ready(function()
{
// scroll to top
$(‘a.topOfPage’).click(function(){
$.scrollTo( 0, 500);
return false;
});
});
</script>

<a href=“#” class=“topOfPage”>Top of page</a>

Here I have used jQuery to initialise the function when the a link with the class ‘topOfPage’ is clicked.
Once this is clicked, it uses the scrollTo plugin to go to the top of the page (as I have used 0 for the position) and with a speed of 500 milliseconds.

Arguments accepted

scrollTo accepts the following arguments:

$.scrollTo( target, duration, settings );

Target can either be an element such as an id of an element (#elementName) or a class (.className) or simply the position on the page you want (’44′, ’100px’, ‘+=30px’, etc).
Duration is the length of time in milliseconds that you want it to take to reach the destination.
Settings is basically a list of other parameters that you wish to pass to it, more information on these can be found here.

Example using scrollTo

An example of how I have implemented it in a site can be seen here. Just scroll down to the bottom and click the ‘Top’ link and it should scroll up nicely for you.

Like I said, it’s attention to detail like this on sites that I really like to see. You can take this how you like and use it to scroll up, down, across etc.
I’m going to be putting a lot of that into the making of a personal project Betheiddleman.com. Things like live validation, thickbox login boxes and more. So watch this space…

  • Pingback: 網站製作學習誌 » [Web] 連結分享

  • http://silentbreeze.it naseem

    Thanks usefull post! , but need to inform user that while coping the code the outcome is formatted uncorrectly, so user has to manually change some character like ” and ` in the pasted code… spent some times before realizing it.

  • http://www.simransoftwaresolutions.com Ashish

    Wao! nice plugin. used it many times. Thanks for posting.

  • Piers

    I have been trying to use the scrollto.js but am having trouble making the easing work. I made the bones of a page to test it on but with no luck.

    http://www.piersrueb.com/scroll/

    can you please tell me where i’m going wrong.

    Thanks in advance.

    Piers

    • http://eggchops.com eggChops

      Hi Piers,

      You will need to include the jquery.js file above the other two js files on that page. Hopefully that will help.

      Nick

  • Piers

    That did it, thanks.

  • MC

    Nice plugin ! thx

  • http://www.dinovici.com Vic

    Hi Nick,
    you helped me big way creating a “go to top” smooth jq effect but I cannot make it work to go to a different part of the page.

    e.g I have a link which should go to #redBox.


    $(document).ready(function()
    {
    // scroll to top
    $('a.redBoxLink').click(function(){
    $.scrollTo( "#redBox", 800);
    return false;
    });
    }
    );

    Can you tell me what’s wrong with my code?

    Thanks, really appreciated :)
    Vic

    • Nick Boldson

      Hi Vic,

      Assuming the link has a class of ‘redBoxLink’ on it, the element it scrolls to has an ID of ‘redBox’ and the jQuery files are included correctly, it should work fine.

      Basically, the code looks fine to me.

      Nick

  • Pingback: 11 jQuery Scroll To Top Solutions, Tutorials, And Plugins | TemplatePanic.com

  • http://www.timpalac.com Tim

    Hey thanks for the post! I’ve been trying to think of a good way to do this for a while, and I enjoy your use of the title value in the function.

    I was able to simplify your function so the value is retrieved from the title instead of a variable. This may or may not work for complex use cases, but it seems fairly compatible across the board.

    $(“.clearMeFocus”).focus(function(){
    if($(this).val()==$(this).attr(“title”)) {
    $(this).val(“”);
    }
    }).blur(function(){
    if ($(this).val()==”") {
    $(this).val($(this).attr(“title”));
    }
    });

    • http://blog.black-aura.com black-aura

      Thanks for this useful function! I used a similar approach to Tim’s since if you have more than one input field with the clearMeFocus class, the value in clearMePrevious will get confused (if the user starts focusing in and out of the fields)

  • http://vb2d.com Cesar

    I was just goin to comment bout using attr(‘title’) to set the value back, instead the var.

    Not only it simplifies script , i actually never thought of it in that way. But it also solves problems when u may have more complex forms and users deleting input data after moving to another field.

    Still a great tip, i wouldn’t think myself of using an attribute inside the input to solve it :3

  • Pingback: enzopaint » 11 jQuery Scroll To Top Solutions, Tutorials, And Plugins