button - 我需要一个每次点击都会向下滚动 400px 的按钮

Question

我有一张我将用作按钮的图像。我需要一些代码来使每次单击图像时页面平滑向下滚动 400 像素。

我认为 JQuery 或 Javascript 可以解决问题，我不太确定，因为我不认识它们。

事实上，如果我可以用键盘快捷键代替按钮，那就更好了。就像 Google+ 上的 Google 一样，“J”和“K”用于上下移动帖子。这正是我想要达到的目标。我网站上的每个帖子都将具有相同的高度，这样可能更容易编码。

Answer 1

只需将动画函数绑定到图像或按钮的单击事件，并让它使用 400 为 scrollTop 属性设置动画。

例如，将此按钮放在您的页面上：

<input type="button" value="Scroll" id="scroll" />

并使用这段 JavaScript：

$('#scroll').click(function() {
    $('body').animate({scrollTop: +400}, 1000);
})

只要确保 jQuery 已加载并且它会工作。

通过在 body 结束标记之前添加这个来加载 jQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

包含 JavaScript 片段的最佳方法是将以下内容放在上面的脚本规则和正文结束标记之间。

<script type="text/javascript">
$(document).ready(function() {
    $('#scroll').click(function() {
        $('body').animate({scrollTop: +400}, 1000);
    })
});
</script>