Scroll animation buttons

Question

I have two buttons with position:fixed on my website. What i need is to while clicking on a top button the window scrolls top on 300px, the same with bottom, it scrolls bottom on 300px. Any ideas how to make this?

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Pete, Jan 04 '16 at 12:35

score 1 · Accepted Answer · answered Jan 04 '16 at 12:37

scroll down:

$("#buttonUp").click(function() {
    $('html,body').animate({
        scrollTop: window.scrollY + 300},
        'slow');
});

scroll up:

$("#buttonDown").click(function() {
    $('html,body').animate({
        scrollTop: window.scrollY - 300},
        'slow');
});

score 0 · Answer 2 · answered Jan 04 '16 at 12:35

0

Use:

window.scrollBy(x, y)

e.g.

window.scrollBy(0, 300);

or

window.scrollBy(0, -300)

If you are using jQuery, you may use:

$(window).scrollTop(value)

answered Jan 04 '16 at 12:35

Ashraf Bashir

9,070
12
50
79

score 0 · Answer 3 · answered Jan 04 '16 at 12:37

0

try something like this:

$( ".yourButtonUpClass" ).on('click', function(){
    window.scroll(0, 300); 
});

$( ".yourButtonDownClass" ).on('click', function(){
    window.scroll(0, -300); 
});

answered Jan 04 '16 at 12:37

metamorph_online

192
1
10

score -1 · Answer 4 · answered Jan 04 '16 at 12:53

First variant works for me! Thanks!

$("#scrollBot").click(function() {
        $('html,body').animate({
            scrollTop: window.scrollY + 300},
            'slow');
    });

    $("#scrollTop").click(function() {
        $('html,body').animate({
            scrollTop: window.scrollY - 300},
            'slow');
    });

Scroll animation buttons

4 Answers4