Question

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

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

如果访问者点击了＆＃39;权利＆＃39;按钮，我希望整个页面滚动到下一个＆＃39;部分，这正好是右边的$（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
});

-edit -

这里要求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;
}

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

1 个答案: