CODEWITHSUNDEEP
javascriptjquery
kcrocks
kcrocks

Reputation: 21

scroll down function on click

below is the code I have for scrollTop. It works fine when I target a specific pixel, but I want to scroll down 300px, instead of scrollTop a certain div on click. can anyone help? 

<div id="button"></div>
<div1 style="height:300px;">img1</div>
<div2 style="height:300px;">img2</div>
<div3 style="height:300px;">img3</div>
<div4 style="height:300px;">img4</div>

$(function() {
$("#button").on("click", function() {
    $("html, body"). animate({"scrollTop":$().offset().top-300}, 1000);
    return false;
    });
});

Upvotes: 0

Views: 15030

Answers (3)

user8973683
user8973683

Reputation: 1

I think it's the best way.

var body = $('html, body');
$('#button').click(function() {
   var n = $(document).height() - $(window).height();
   body.stop().animate({scrollTop: n }, 1000, function() {
});
});

Upvotes: 0

jyothsna
jyothsna

Reputation: 131

Try using window.scrollBy(0,300);

Upvotes: 3

megawac
megawac

Reputation: 11373

$().offset().top doesnt do much of anything. Replace it with window.scrollY

$(function() {
    $("#button").on("click", function() {
        $("body").animate({"scrollTop": window.scrollY-300}, 1000);
        return false;
    });
});

Also negative is up and positive is down when we're talking about scrolling so you probably want to add 300 instead.

Upvotes: 1

Related Questions