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

Question

我正在尝试制作一个水平滚动的网页。这个模板使用J Query和CSS来控制宽度，但是用户仍然需要在底部拖动滚动条 - 如何添加箭头或用户可以点击的东西，它会转到下一部分？< / p>

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

Answer 1

查看此JQuery插件http://plugins.jquery.com/project/ScrollTo

Answer 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();
});