Using jQuery animate() function to do a smooth scrolling:

I have also created a div as follow:


<div id="scrollToHere">
Scroll to here
</div>

You need something to run your script. Create a button like this:


<input type="button" onclick="scollWin();" value="Scroll up" />

The jQuery Code will be like this:


function scrollWin(){
$('html,body').animate({
scrollTop: $("#scrollToHere").offset().top
}, 800);
}

Here is something to try:

now jQuery window scrolling is done with animation.

Enjoy it..

Related posts:

Default ThumbnailjQuery Animate Default ThumbnailjQuery Animate – Advanced Default ThumbnailDrag and Drop with jQuery for Touch Devices Default ThumbnailjQuery Gloss Plugin
animationfree stuffhow tojavascriptjquerywindow
By Browsers, CSS, Design, DHTML, Free Stuff, HTML, Java Script, Jquery, Misc, Web & Programming, Web Browsers, XHTML77 Comments on Scroll window smoothly using jQuery

77 Replies to “Scroll window smoothly using jQuery”

  1. The down scroll is working fine. But the UP scroll is not. It jumps up without animation.
    All you have to do is remove the (,body) from $(“html, body”)

    Because Opera supports both. So, it scrolls twice.
    Let the code be: $(“html”).animate…..

    On safari, firefox and IEs: this code works fine.

    Reply

  3. Just started using jQuery here a few months ago, love it! Can’t wait to read more from this blog. Know of any good jQuery Blog Aggregators?

    Reply

  5. Thanks! Just wanted to point out a small typo, the onclick should of course read “scrollWin();” but an r was left out. A very small error, but it does break the script, so wanted to point it out in case anyone was having trouble.

    Reply

  6. Thanks Shick for your comment.

    This is the first time I hear about flashing screen when trying this code.

    Actually,
    This code was tested on The following browsers:
    – IE 6 and 7 (window)
    – Firefox (windows and mac)
    – Opera (windows and mac)
    – Safari (mac)

    I did not experience any problem with this code.
    Please provide with all information about the jQuery version and your browser version.

    Reply

  9. The scroll animation keeps going. So, if you try to scroll the window using mouse wheel after clicking on the button, it will surely continue till the animation is done.

    If you want to stop the animation in any action taken, then try to use $(“html,body”).stop();
    this will stop all animations on window.

    Reply

  20. Actually, there a Javascript code for that

    window.scrollBy(x,y);
    // X for horizontal and Y for vertical.

    So, you can scroll window in both ways.

    Reply

  27. what if i am using it to have in several locations?

    div id=1
    div id=2
    div id=3
    div id=4

    scroll to div 1
    scroll to div 2
    scroll to div 3
    scroll to div 4

    how can we do this? Its like this: at the bottom there are anchor tags that will need to scroll up/down on the specific div id. check the site i am working on to see what i meant, http://www.bryanvenancio.com

    Thanks!

    Reply

  30. Great info, and very helpful. One question from a jQuery newbie – how would I add easing to this? Thanks for any help you can give!

    Reply

  35. This is a superb post Freelancer ID Blog .
    But I was wondering how do I suscribe to the RSS feed?

    Reply

  36. thanks for this post, its by far the clearest and simplest way of using jquery to scroll I have found – the user comments helped with exactly what I needed as well!

    Reply

  38. Wonderful post. It is really useful to scan your blog. This article connected with your site is exactly splendid, and your blog design is Simple generous. It seems not dazzled. So excellent.

    Reply

  40. Great post! I am just starting out in community management/marketing media and trying to learn how to do it well – resources like this article are incredibly helpful.

    Reply

  42. I wanted to thank you for this great read!! I definitely enjoying every little bit of it.I have you bookmarked to check out new stuff you post.

    Reply

  45. You have mention good post above I really enjoy the information. I wish to come again on your site in future

    Reply

  62. Just wanted to point out that you have to include a document ready like so…

    function scrollWin(){
    $(document).ready(function(){

    $(‘html,body’).animate({
    scrollTop: $(“#scrollToHere”).offset().top
    }, 2000);
    });

    };

    Reply

  66. Jquery is fantastic. Thanks for the script.
    some one asked how to use the script on anchor link. you can create function and call that function onclick event of anchor link. or just call scroll code on onclick event.
    whatever suits you.

    Reply

  67. How would I incorporate this across two different pages??

    For example, I click on the navigation menu on the homepage, then after the new page loads, it automatically scrolls to the div.

    Thanks

    Reply

  72. A little addition you can do is to allow the user to cancel the scroll by scrolling themself.
    I’ve never liked how if you’re scrolling the user down the page and they try to scroll back up, they are unable to.

    The following snippet will allow them to override it:

    $viewport = $(‘body,html’); //use both body and html as firefox places overflow at the html level, and hence scrolls here

    $viewport.bind(“scroll mousedown DOMMouseScroll mousewheel keyup”, function(e){
    if ( e.which > 0 || e.type === “mousedown” || e.type === “mousewheel”){
    $viewport.stop();
    }
    });

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *