单击按钮时水平滚动（视口 + scrollLeft）

Question

我很确定这是一个非常简单的问题，但即使通过 Stackoverflow/Google 阅读了几个小时......仍然没有运气。

我有一个水平滚动网站，效果很好。现在我在屏幕底部（左/右）添加了两个按钮。

如果访问者单击“右”按钮，我希望整个页面滚动到下一个“部分”，即右侧的 $(window).width() 像素。

我的想法是在点击按钮 ScrollLeft 时添加这样的 jquery：$(window).width() + $(window).ScrollLeft()。

从理论上讲，这将从第一次单击开始，向右滚动到视口的宽度。 2/3/4 点击它将从当前的 ScrollLeft() 位置开始，并再次添加视口宽度。

我使用的 jquery 如下（很可能有点臃肿，jquery 不是我的强项）

我试过定义变量，进一步分解等等。一切都无济于事。

        $(".right a").on("click", function(event) {
    event.preventDefault(); 
    $("html, body").animate({ 
        scrollLeft: $(window).scrollLeft() + $(window).width()
    }, "slow"); //Animates the scroll
});
        $(".left a").on("click", function(event) {
    event.preventDefault();
    $("html, body").animate({ 
        scrollLeft: $(window).scrollLeft() - $(window).width() 
    }, "slow"); //Animates the scroll
});

-编辑-

这里要求的 HTML 标记。

#horz-wrap 里面的文章实际上是滚动的。

 <div class="sitewrap">
    <div class="portfolio-wrapper">
        <section id="horz-wrap">
            <article class="post">
            <!--section here-->
            </article>
            <article class="post">
            <!--section here-->
            </article>
        </section>
    </div>
    <ul class="horz-nav">
        <li class="left"><a href="#">&#60;</a></li>

        <li class="right"><a href="#">&#62;</a></li>   
    </ul>

--编辑 2--

根据要求，我刚刚上传了页面，实时版本：http://lauretf35.thirtyfive.axc.nl/laurens/test.html 谢谢！

Answer 1

这是您需要的更改，您可能仍需要一些修复，但这将有助于滚动。

JavaScript

$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('table').animate({
scrollTop: target.offset().top - 100
}, 1000);
return false;
}
}
});
});

CSS：

table {
border-collapse: collapse;
border-spacing: 0;
position: absolute;
top: 200px;
width: 100%;
display: inline-block;
}