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

发布于 2025-01-08 01:43:32 字数 228 浏览 1 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

木森分化 2025-01-15 01:43:32

只需将一个动画函数绑定到图像或按钮的单击事件，并让它为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 片段的最佳方法是将以下内容放在上面的脚本规则和 body 结束标记之间。

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

Just bind an animate function to the click event of your image or button and let it animate the scrollTop property with 400.

For example, place this button on your page:

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

And use this piece of JavaScript:

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

Just make sure jQuery is loaded and it will work.

Load jQuery by adding this just before the body end tag:

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

And the best way to include the JavaScript snippet is to place the following between the script rule above and the body end tag.

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

回复收藏 0 原文

~没有更多了~