onclick scroll down calc (100% - 60px)

Question

I'm working on my Tumblr blog and have the following CSS set:

img
{
    max-height: calc(100% - 60px);
    margin-top:30px;
}

so the margins (top and bottom) are both 30px.

I'm trying to add two buttons prev and next that will, when clicked, scroll the page up or down (100% - 60px).

This is the JS I have:

$(function() {
    $("#next").on("click", function() {
        $("body").animate({"scrollTop": window.scrollY+100}, 100);
        return false;
    });
}); 

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

And here's my fiddle: https://jsfiddle.net/cztqjwb2/1/

Any help would be greatly apreciated.

Thanks.

PS: also I don't know why it work only on Safari.

Please post the code and any relevant information in your question, don't outsource it. If the link dies, your question dies with it. — Kyll, Apr 12 '15 at 10:27

score 1 · Accepted Answer · answered Apr 12 '15 at 11:13

1

$("body").animate({"scrollTop": window.scrollY + 100}, 100);

This scrolls to current position + 100px. Assuming by 100% - 60px you mean window height - 60px (as opposed to document height), replace that 100 with (window.innerHeight - 60).

$("body").animate({"scrollTop": window.scrollY + window.innerHeight}, 100);

I updated your fiddle accordingly.

answered Apr 12 '15 at 11:13

Siguza

21,155
6
52
89

Do you have any idea why it works only in Safari though? @Siguza – Federico Apr 12 '15 at 14:05
1

It actually works with Safari, Chrome and Opera, just not in Firefox (IE I didn't test and I don't care). See [this SO question & answer](http://stackoverflow.com/questions/8149155/animate-scrolltop-not-working-in-firefox) for why that is and how to work around it. Updated [the fiddle](https://jsfiddle.net/cztqjwb2/4/) again. – Siguza Apr 12 '15 at 15:43

onclick scroll down calc (100% - 60px)

1 Answers1