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

这是我的小提琴：https://jsfiddle.net/cztqjwb2/1/

任何帮助都会有很大帮助。

感谢。

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

Answer 1

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

滚动到当前位置+ 100px 。假设100% - 60px表示窗口高度 - 60px （而不是文档高度），请将100替换为(window.innerHeight - 60)。< / p>

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

我相应地更新了your fiddle。

onclick向下滚动计算（100％ - 60px）

1 个答案: