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

Question

我有一个图像将用作按钮。我需要一些代码，使页面在每次单击图像时平滑地向下滚动 400px。

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

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

Answer 1

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

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

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

并使用这段 JavaScript:

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

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

通过在正文结束标记之前添加以下内容来加载 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>