我需要一个按钮,每次点击它都会向下滚动400px

时间:2012-02-21 03:14:59

标签: button scroll keyboard-shortcuts smooth-scrolling

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

我认为JQuery或Javascript会起作用,我不太确定,因为我不知道它们。

事实上,如果不是按钮,我可以拥有一个键盘快捷键。就像Google上的Google一样,“J”和“K”用于在帖子中上下移动。这正是我想要实现的目标。我网站中的每个帖子都是相同的高度,这样可以更容易编码。

1 个答案:

答案 0 :(得分:2)

只需将animate函数绑定到图像或按钮的click事件,然后让它使用400为scrollTop属性设置动画。

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

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

使用这段JavaScript:

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

只需确保加载jQuery即可。

通过在正文结束标记之前添加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>