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

Question

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

我有一个水平滚动的网站，效果很好。现在我在屏幕底部添加了两个按钮 (left/right)。

如果访问者点击 'right' 按钮，我希望整个页面滚动到下一个 'section'，正好是 $(window).width() 像素向右。

我的想法是添加 jquery 以便在单击按钮 ScrollLeft 时：$(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;
}

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

Horizontal scrolling upon button click (viewport + scrollLeft)

javascript

jquery

scroll

horizontal-scrolling