javascript - onclick 向下滚动计算 (100% - 60px)

Question

我正在开发我的 Tumblr 博客，并设置了以下 CSS:

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

所以边距(顶部和底部)都是 30px。

我正在尝试添加两个按钮上一个和下一个，单击它们时，页面会向上或向下滚动(100% - 60px)。

这是我的JS:

$(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;
    });
}); 

这是我的 fiddle :https://jsfiddle.net/cztqjwb2/1/

任何帮助将不胜感激。

谢谢。

PS:我也不知道为什么它只适用于 Safari。

Answer 1

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

这会滚动到当前位置+ 100px。假设 100% - 60px 您的意思是窗口高度 - 60px(而不是文档高度)，请将其替换为 100 与 (window.innerHeight - 60)。

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

我更新了your fiddle相应地。