使用鼠标滚轮或者手势滑动到页面节点部分

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>
    &lt;! doctype html&gt;
    &lt;html&gt;
        &lt;head&gt;
            &lt;script&gt;
                $(function() {
                    $.scrollify({
                        section : "section",
                    });
                });
            &lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
            &lt;section&gt;&lt;/section&gt;
            &lt;section&gt;&lt;/section&gt;
        &lt;/body&gt;
    &lt;/html&gt;
                </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>