滚动到逐节 [英] scroll to section by section
本文介绍了滚动到逐节的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有HTML标记：
<body>
<header></header>
<nav>
<ul>
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
</ul>
</nav>
<section id="one"></section>
<section id="two"></section>
<footer></footer>
</body>
其中部分是全屏（宽度：100％;高度：100％
where section is fullscreen (width: 100%; height:100%;) and menu have absolute position.
- 如何使用鼠标滚动（或键）滚动和捕捉每个部分？
- 滚动
- 当我点击链接时，会滚动到部分。 $ b $ b
- How can I use mouse scroll (or keys ) to scroll and snap to each section?
- When scroll to last section then scroll-down to #one again and repeat it.
- When I click on link, it scroll to section.
感谢您的建议，想法和代码。
Thank you for your suggestions, ideas, code.
推荐答案
如果你想与旧的浏览器，如IE8，9，Opera 12 ...和更多的功能更多的兼容性，我创建了一个JavaScript库，你可以使用 fullPage.js ：
If you want more compatibility with old browsers such as IE8, 9, Opera 12... and plenty of more functionalities, I created a JavaScript library that you can make use of fullPage.js:
- a href =http://alvarotrigo.com/fullPage/ =nofollow>演示
- 第页
- Demo
- Page
添加了一些功能：
- 在IE 8和旧浏览器上使用它，不支持CSS 3。
- 添加实时菜单和导航项目符号
- 部分和幻灯片的网址定位
- 响应高度和宽度选项
- 回呼和数十种选项和方法
- 支持水平滑块。
- 移动和平板电脑支持
- 使用键盘箭头滑动页面。
- Use it over IE 8 and old browsers with no CSS 3 support.
- Add a live menu and navigation bullets
- URL anchors for sections and slides
- Responsive height and width options
- Callbacks and tens of options and methods
- Support for horizontal sliders.
- Mobile and Tablet support
- Slide throw the page using the keyboard arrows.
此外：
- 有多个wordpress和CMS主题使用它
- 角度指令
- （Google，Sony，McDonald's，British Airways，EA，Vodafone，Mi ...）
这篇关于滚动到逐节的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
