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.
$("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.