如何修改此模板以添加可滚动到下一部分的按钮？答案

【问题标题】：How could I modify this template to add buttons that would scroll to the next section?如何修改此模板以添加可滚动到下一部分的按钮？
【发布时间】：2010-12-23 10:59:38
【问题描述】：

我正在尝试制作一个水平滚动的网页。此模板使用 J Query 和 CSS 来控制宽度，但用户仍然必须将滚动条拖过底部 - 我将如何添加箭头或用户只需单击即可转到下一部分的内容？

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

【问题讨论】：

标签： javascript jquery css layout

【解决方案1】：

看看这个 JQuery 插件http://plugins.jquery.com/project/ScrollTo

【讨论】：

【解决方案2】：

您可以使用scrollLeft 和offset() 来确定要滚动到的内容：

下一步按钮可能如下所示（非常接近于jQuery Enlightenment 第 7 章中的示例）：

$(".next").click(function(e){
    $('html, body').animate({
        scrollLeft: $(this).closest('td').next().offset().left
    }, 1000);
    e.preventDefault();
});

我假设您密切关注 CSS-Tricks 文章，这意味着您的页面上有 table。

如果你不想要动画，你可以这样做：

$(".next").click(function(e){
    $('html, body').scrollLeft($(this).closest('td').next().offset().left );
    e.preventDefault();
});

【讨论】：