クリックでスクロールするやつ

HTML

<div class="navigation">
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#php">PHP</a>
    <a href="#javascript">JavaScript</a>
    <a href="#jquery">jQuery</a>
</div>

<div class="container">
    <div class="section">
        <h1 id="html">HTML</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in diam ut mi tincidunt suscipit. Sed faucibus ornare sapien non faucibus. Nulla id blandit ligula. Etiam convallis nulla quis ante interdum ac gravida ante elementum. Morbi est nulla, lobortis a tincidunt nec, venenatis ut nibh. Integer tincidunt luctus nisl in ornare. Mauris consectetur ullamcorper commodo. Suspendisse commodo congue dui eu euismod. Vestibulum tempus nulla at magna luctus elementum.

Praesent fermentum pretium diam, id dapibus velit eleifend ut. Nunc quis consequat odio. In venenatis ullamcorper purus, sed porta tellus vulputate vitae. Etiam egestas feugiat augue congue mattis. Phasellus posuere aliquam urna quis mattis. Aliquam a leo ut mauris posuere consequat nec non urna. Morbi eleifend, sem sit amet mattis iaculis, purus quam sodales tortor, quis rhoncus libero purus ut magna. In mollis, sapien eget laoreet eleifend, massa est adipiscing nulla, sed vehicula dui tellus in eros. Nulla facilisi. Sed ultricies lacus sit amet lorem consequat ullamcorper imperdiet erat tempor. Fusce nec quam id ipsum sollicitudin sodales.

Mauris augue quam, fermentum quis facilisis vitae, dapibus ac arcu. Ut sed augue felis. Nullam feugiat tristique arcu, eget cursus nibh interdum nec. Fusce suscipit tortor eu odio commodo ac commodo lorem tincidunt. Mauris nec arcu a metus egestas accumsan. Vivamus enim quam, ultrices ac euismod ut, varius nec nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Donec elit mauris, adipiscing sit amet aliquam at, molestie a sem. Nullam ut varius ipsum. Phasellus velit quam, vulputate id pretium vel, hendrerit nec tellus. Pellentesque erat leo, mollis...

CSS

.container{
    width:350px;
    margin:0 auto;
}
.section{
    margin-top:60px;
}
.navigation{
    width:400px;
    text-align: center ;
    position: fixed;
    background:white;
    padding:20px 20px;
    width:100%;
    margin-top:0px;
    top:0px;
}
.navigation a{margin-right:10px;}
h1{font-size:25px; font-weight:bold;margin-bottom:15px;}

JavaScript

$(document).ready(function() {
    $('a[href^="#"]').click(function(event) {

        var id = $(this).attr("href");
        var offset = 60;
        var target = $(id).offset().top - offset;
        $('html, body').animate({scrollTop:target}, 500);
        event.preventDefault();
        return false;
    });
});