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

【问题标题】：I need a button that will scroll 400px down every time it's clicked我需要一个每次点击都会向下滚动 400px 的按钮
【发布时间】：2012-02-21 03:14:58
【问题描述】：

我有一张图片用作按钮。我需要一些代码，让页面在每次点击图片时平滑向下滚动 400 像素。

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

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

【问题讨论】：

标签： button scroll keyboard-shortcuts smooth-scrolling

【解决方案1】：

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

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

<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 sn-p 的最佳方法是将以下内容放在上面的脚本规则和正文结束标记之间。

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

【讨论】：

就像我说的，我不知道 JQuery 或 Javascript，那么我究竟如何确保 JQuery 已加载？就像我们在同一页面上一样，我已将按钮放在页面正文中，而您在标记内提供的 Javascript。到目前为止，它对我不起作用。
哇，它有效！谢谢！只有一个小问题。它只工作一次。我什至尝试了两次添加按钮，但它什么也没做。
尝试将“{scrollTop: +400}”替换为“{scrollTop: '+=400'}”，并通过将“$('body')”替换为“$”使其跨浏览器（'html，正文'）”。查看我在那里创建的实时示例：jsfiddle.net/dely/TN4wP/14。