下一页/上一页按钮的onClick滚动到下一个和以前 的(Next/Prev buttons

2019-10-30 05:27发布

我还在学习JavaScript和需要一些帮助。 我在做下一个和上导致滚动到下一个或上一个按钮<td>的网页上。 我想实现这个到VIRB网站的现有结构。 标记看起来是这样的:

div id="next">next</div><div id="prev">prev</div>
<table>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
<tr><td>code that includes img</td></tr>
</table>

这里是我正在使用的脚本:

jQuery.easing.def = "easeInOutQuad";
    $("#next").click(function (){
        //$(this).animate(function(){
            $('html, body').animate({
                scrollLeft: $("td").next.offset().left
                 }, 600);
        //});

    });​

这里是的jsfiddle我的工作

Answer 1:

下面记录您的当前项目来查看。 你需要一个类似THIG递减指数在你的“下一页”程序。

您可能还需要添加一个延迟或事件切断,使动画过程中多次点击不采取高于或低于你必须表明,项目的范围currentIdx的价值。

var currentIdx = 0;
jQuery.easing.def = "easeInOutQuad";
        $("#next").click(function (){

            //$(this).animate(function(){
                $('html, body').animate({
                    scrollLeft: $("td").eq(currentIdx).offset().left
                     }, 600);
                currentIdx++;     
            //});
        });


Answer 2:

尝试:

    scrollLeft: $("td").next().offset().left


文章来源: Next/Prev buttons onClick scroll to next and previous 's