なめらかスクロール

by nekosmash

HTML

<script src="http://dl.dropbox.com/u/63305355/jquery.mousewheel.js"></script>
<script src="http://dl.dropbox.com/u/63305355/jquery.easie.js"></script>
<body>
<div id="contents">
    <div id="c01" class="section">
        <h2>SECTION 01</h2>
        <p>イージングスクロールに</p>
    </div>
    <div id="c02" class="section">
        <h2>SECTION 02</h2>
        <p>キーダウンイベントと</p>
    </div>
    <div id="c03" class="section">
        <h2>SECTION 03</h2>
        <p>ksk機能を追加しました</p>
    </div>
    <div id="c04" class="section">
        <h2>SECTION 04</h2>
        <p>キーを押し続けると</p>
    </div>
    <div id="c05" class="section">
        <h2>SECTION 05</h2>
        <p>スムーススクロールの効果が増大します</p>
    </div>
    <div id="c06" class="section">
        <h2>SECTION 06</h2>
        <p>iPhoneみたいでいいでしょ？</p>
    </div>
</div>
</body>

CSS

body,div,pre,p,blockquote, 
form,
dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6, 
embed,object { 
    margin: 0;
    padding: 0;
    vertical-align: baseline; 
    font-size: 100.01%;
}
body {
    background: #888;
    color: #888;
    font: 13px/1.231 Arial, Helvetica, sans-serif;
    *font-size:small;
    *font:x-small;
}
h1 {
    font-size: 130%;
    padding: 10px;
}
h1 a {
    color: #fff;
    text-decoration: none;
}
h1 a:hover {
    text-decoration: underline;
}
h2 {
    font-size: 182%;
}
div.section {
    width: 100%;
    background: #FFFFFF;
    padding: 20px;
    height: 400px;
    margin-bottom: 1px;
}

JavaScript

$(function() {
    var scrolly = 0;
    var speed = 100;
    var end;
    
    var agent = navigator.userAgent;
    if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
        return;
    }
    
    //↑↓キー入力に対応
    $(window).keydown(function(e){        
        scroll(e.keyCode==38,e.keyCode==40);        
        return false;
    });
    
    //ホイールに対応
    $(window).mousewheel(function(event, mov) {
        scroll(mov>0,mov<0);
        return false;
    });
    
    //スクローラ本体
    function scroll(head,foot){
    
        if(end==false)speed+=30;
        else speed=100;
        end=false;
    
        if(jQuery.browser.webkit){
            if(head)scrolly =  $('body').scrollTop() - speed;
            else if(foot)scrolly =  $('body').scrollTop() + speed;
        }else{
            if(head)scrolly =  $('html').scrollTop() - speed;
            else if(foot)scrolly =  $('html').scrollTop() + speed;    
        }
        //アニメーション部分
        $('html,body')
            .stop()
            .animate({scrollTop:scrolly},'slow',$.easie(0,0,0,1),callback);
    }

    //完了通知
    function callback(){
        end = true;
    }
    
        
});