我想通过单击箭头导航使每个部分水平滚动？每个部分都有无限的垂直滚动

Question

现在，我想通过单击箭头导航使每个部分水平滚动？每个部分都有一个无限的垂直滚动。

1.导航到水平滚动的导航箭头。

<a class="arrow arrow-left" role="button"></a>    

2.开始内容。

<section class="timeline" id="1">infinite content..</section>
<section class="timeline" id="2">infinite content..</section>
<section class="timeline" id="3">infinite content..</section>
<section class="timeline" id="4">infinite content..</section>

<a class="arrow arrow-right" role="button"></a>

.timeline{
    position: relative;
    margin: 30px auto;
    width: 100%;
}
.arrow {
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    position: absolute;
}

.arrow-right {
    border-left: 15px solid #000;
    right: 0;
}
.arrow-left {
    border-right: 15px solid #000; 
    left: 0;
}

Answer 1

看看Jquery Animate（）函数。

在这里，您可以定义时间轴部分，根据单击的箭头向左和向右滚动