css部分：
<style> .demo{width:300px; margin:60px auto 10px auto;text-align:center} @media only screen and (min- 420px) { .demo{width:500px; margin:60px auto 10px auto} } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /****** Main ********/ body { font-size:62.5%; font-family: "Microsoft Yahei", Tahoma, Helvetica, Arial, sans-serif; color:#FFF; } h1 { font-size:7em; padding:1.4em 0 0 0; } h2 { font-size:6em; padding:0.5em 0 0.5em 0; } h3 { font-size:2.3em; } dt { font-size:2.3em; } dd { font-size:1.9em; padding:0.6em 0 0.9em 0; } p { font-size:1.9em; padding:0.4em 0 0.4em 0; } a:link, a:visited { color:#FFF; text-decoration:none; } a:hover, a:focus, a:active { text-decoration:underline; } a.back:link, a.back:visited, a.twitter:link, a.twitter:visited { font-size:1.3em; line-height:4em; position:absolute; left:40px; bottom:25px; } a.back:link, a.back:visited { bottom:auto; top:0px; } a.twitter img { border-radius:50%; float:left; border:1px solid #bbb; padding:0.1em; background:#FFF; } a.twitter span { padding:0 0 0 0.6em; } header { padding-bottom:5em; } .scroll { position:relative; font-size:1.3em; margin-top:580px; display:inline-block; } .scroll:hover { text-decoration:none; } .scroll:after { content:''; width:40px; height:40px; position:absolute; top:40px; margin:auto; top:50px; right:0; bottom:0; left:0; -webkit-animation:3s arrow infinite ease; animation:3s arrow infinite ease; } .scroll:after { border-right:2px solid #FFF; border-bottom:2px solid #FFF; -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); } .tagline { font-size:2.3em; letter-spacing:0.02em; padding:0; } .tagline a{text-decoration:underline} .panel { height:100vh; border-bottom:1px solid #666; } .home { background: #65c2cf; background:hsl(184,65%,49%); text-align:center; } .overview { background:#e14456; background:hsl(350,92%,59%); } .configuration { background:#6dcb94; background:hsl(158,58%,52%); } .options { background:#ec8200; background:hsl(28,100%,52%); } .methods { background:#64a0d4; background:hsl(200,60%,55%); } .inner { width:960px; margin:0 auto; } pre { background:rgba(0,0,0,0.2); padding:2em 0 2em 0; font-size:2.1em; margin-top:0.7em; } @-webkit-keyframes arrow { 0%,100% { top:50px; } 50% { top:80px; } } @keyframes arrow { 0%,100% { top:50px; } 50% { top:80px; } } #carbonads { width:330px; margin:20px auto; font-size:1.3em; line-height:1.4; border:1px solid rgba(255,255,255,0.3); overflow: hidden; border-radius:8px; padding:10px 0 10px 10px; } #carbonads a { float:left; text-align: left; } #carbonads .carbon-text { width:180px; } #carbonads .carbon-poweredby { margin-top:7px; } #carbonads .carbon-text, #carbonads .carbon-poweredby { padding:0 9px; } @media (max-960px) { .inner { width:100%; } h1,h2,h3,p,pre,dl { margin-left:30px; margin-right:30px; } } </style>
html部分：
<!--[if lt IE 9]> <script src="../../../../js/html5shiv.min.js"></script> <![endif]--> <section class="panel home" data-section-name="home"> <div class="inner"> <header> <h1 class="company_bottom">SCROLLIFY</h1> </header> <a href="#overview" class="scroll"></a> </div> </section> <section class="panel overview" data-section-name="overview"> <div class="inner"> <h2>基本使用</h2> <p>需要引入 jQuery 1.6+ 以及缓冲动画插件<a href="#" >jquery.easing.js</a>.</p> <pre> <! doctype html> <html> <head> <script> $(function() { $.scrollify({ section : "section", }); }); </script> </head> <body> <section></section> <section></section> </body> </html> </pre> </div> </section> <section class="panel configuration" data-section-name="configuration"> <div class="inner"> <h2>配置</h2> <pre> $.scrollify({ section : "section", sectionName : "section-name", easing: "easeOutExpo", scrollSpeed: 1100, offset : 0, scrollbars: true, before:function() {}, after:function() {} }); </pre> </div> </section> <section class="panel options" data-section-name="options"> <div class="inner"> <h2>选项设置</h2> <dl> <dt>section</dt> <dd>节点部分选择器.</dd> <dt>sectionName</dt> <dd>每一个section节点对应的data属性.</dd> <dt>easing</dt> <dd>定义缓冲动画.</dd> <dt>offset</dt> <dd>定义每个色彩tion节点的偏移量.</dd> <dt>scrollbars</dt> <dd>是否显示滚动条.</dd> <dt>before</dt> <dd>回调函数,滚动开始前触发.</dd> <dt>after</dt> <dd>回调函数,滚动完成后触发.</dd> </dl> </div> </section> <section class="panel methods" data-section-name="methods"> <div class="inner"> <h2>方法</h2> <p>滑动到指定的节点。</p> <pre> $.scrollify("move","#name"); </pre> <div style="text-algin:center;margin:10px auto"></div><br/> </div> </section>
js部分：（此处需要引入jquery.js、easing.js和scrollify.js ）
<script> $(function() { $(".panel").css({"height":$(window).height()}); var timer; $(window).resize(function() { clearTimeout(timer); timer = setTimeout(function() { $(".panel").css({"height":$(window).height()}); },40); }); $.scrollify({ section:".panel" }); $(".scroll").click(function(e) { e.preventDefault(); $.scrollify("move",$(this).attr("href"),easingeaseInOutBounce()); }); }); </script>