特效描述:jQuery 右侧固定图标导航 控制页面 全屏滚动。jQuery页面全屏滚动,右侧固定层的图标导航点击控制页面全屏滚动效果代码。(不兼容IE6,7,8)
代码结构
1. 引入CSS
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/style.css">
2. 引入JS
<script src="js/modernizr.js"></script> <script src="js/jquery-2.1.4.js"></script> <script src="js/main.js"></script>
3. HTML代码
<nav class="cd-vertical-nav"> <ul> <li><a href="#section1" class="active"><span class="label">5iweb</span></a></li> <li><a href="#section2"><span class="label">HTML5</span></a></li> <li><a href="#section3"><span class="label">CSS3</span></a></li> <li><a href="#section4"><span class="label">SVG</span></a></li> </ul> </nav><!-- .cd-vertical-nav --> <section id="section1" class="cd-section"> <div class="content-wrapper"> <h1>网页特效</h1> <a href="#section2" class="cd-scroll-down cd-image-replace">scroll down</a> </div> </section><!-- cd-section --> <section id="section2" class="cd-section"> <div class="content-wrapper"> <h2>HTML5</h2> <p>HTML5草案的前身名为 Web Applications 1.0,于2004年被WHATWG提出,于2007年被W3C接纳,并成立了新的 HTML 工作团队。</p> </div> </section><!-- cd-section --> <section id="section3" class="cd-section"> <div class="content-wrapper"> <h2>CSS3</h2> <p>CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。</p> </div> </section><!-- cd-section --> <section id="section4" class="cd-section"> <div class="content-wrapper"> <h2>SVG</h2> <p>可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。</p> </div> </section><!-- cd-section --> <script src="js/main.js"></script> <!-- Resource jQuery -->