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

Question

我正在处理我的 Tumblr 博客并设置了以下 CSS：

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

所以边距（顶部和底部）都是 30px。

我正在尝试添加两个按钮 prev 和 next ，单击它们时，将向上或向下滚动页面 (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);

这会滚动到 当前位置 + 100 像素 。假设 100% - 60px 你的意思是 window height - 60px （与 document height 相反），替换那个 100 与 (window.innerHeight - 60).

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

我相应地更新了 your fiddle。

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

onclick scroll down calc (100% - 60px)

javascript

jquery

scrollto

scrolltop