制作简单的按钮以自动滚动到下一个和上一个Id' d元素

时间:2016-08-01 21:30:37

标签: javascript html5 css3

我是网页设计的新手,但我的任务是为我所在的组织制作网站。

我一直在使用各种关键字搜索,但我的编码知识只是从Javascript和CSS动画开始。

我试图制作一对简单的按钮,滚动到页面上一系列元素中的下一个和上一个。

一个按钮,可以转到上一个部分,还有一个按钮,可以转到下一个部分,它位于同一页面上。

到目前为止,我发现的所有内容都是有一个要点击的部分列表,而不是两个在它们之间滚动的按钮,或者它与图像幻灯片有关。

这里的任何帮助将不胜感激,Javascript或CSS。

我得到了一般的想法,我必须给每个div一个特定的ID,设置一个事件来监视当前在视口中的内容,并将按钮设置为onclick到上一个或下一个部分,但我对CSS或Java的编码也不够熟悉。

1 个答案:

答案 0 :(得分:0)

跳转到下一个或上一个div是纯HTML,例如你的标记看起来像:

<div id="first">First content</div>
<div id="second">Second content</div>
<div id="third">Third content</div>

然后你可以使用简单的锚点跳转到不同的部分,例如:

<a href="#second">Got to second</a> <!-- Jump to second part -->

现在,如果您想要动画滚动而不仅仅是跳跃,您可以使用合适的Javascript库,例如: JQuery的。 CSS-Tricks有a quite simple做平滑滚动的例子。