CODEWITHSUNDEEP
jquerycss
Nrc
Nrc

Reputation: 9787

Scroll slowly to 100%

I try to click to a button and scroll.I can do it easily with html (option 1). But it jumps and I would like to control the speed to move slowly.

Then I tried jQuery (Option1) but I do not know how to tell to scroll 100% of the window and how to control the speed. Is it possible to do that with css or/and jQuery?

Option 1. Scroll with HTML:
http://jsfiddle.net/VPT4q/

<div id="first">
    <a href="#second">
        <div id="down"></div>
    </a>
</div>

<div id="second"></div>

Option 2. Scroll with jQuery: http://jsfiddle.net/VPT4q/1/

$(function(){      
    $('#down').click(function() {
        // window.scrollBy(0,200);
        window.scrollTo(0,200);
    });
})

Upvotes: 0

Views: 231

Answers (2)

user1
user1

Reputation: 1065

$('#down').click(function () {
      $('html, body').animate({ scrollTop: $('body').height() }, 1000);
});

//1000 is number of milliseconds

Upvotes: 3

Gray
Gray

Reputation: 7130

If you are going to do jQuery, I'd do it something like this:

$('#down').click(function() {
    $('html,body').animate({scrollTop: $('#second').offset().top},'slow');
});

fiddle: http://jsfiddle.net/gJwUT/

May not be exactly what you want, but I think it will get you started.

You can tweak the speed by changing 'slow' to a number. 'slow', I think, is 1 second. or '1000'.

$('html,body').animate({scrollTop: $('#second').offset().top}, 2000 );

Upvotes: 1

Related Questions