Edit in JSFiddle

/*
    MagicNav - The jQuery magicNav for creating magical scrollTo navigation
    by John Polacek (@johnpolacek)
    
    Dual licensed under MIT and GPL.

    Dependencies: jQuery
*/

;(function($) {

    $.MagicNav = function($nav, $navTo, options) {

        var magicNav = this;

        var defaults = {
            // titles
            // default is 'text', which will generate titles by doing .text() on the navTo elements
            // or pass an attribute - e.g. title:'data-title' to do .attr('data-title') on navTo elements
            titles:'text',
            // default is easeInOutQuad
            ease: function (x, t, b, c, d) {
                if ((t/=d/2) < 1) return c/2*t*t + b;
                return -c/2 * ((--t)*(t-2) - 1) + b;
            },
            // duration of scrolling to animation
            duration:1000,
            // amount to offset the scroll position
            offset:0
        };

        var i,
            numItems = $navTo.length;
            
        magicNav.settings = $.extend({}, defaults, options);

        // create function to get title from element .text() or attr('data-whatever')
        var getTitle = magicNav.settings.titles === 'text' ?
            function($el) {return $el.text();} :
            function($el) {return $el.attr(magicNav.settings.titles);};

        var navMarkup = '';
        for (i=0; i<numItems; i++) {
            navMarkup += '<a class="magicnav-link">'+getTitle($navTo.eq(i))+'</a>';
        }
        $nav.html(navMarkup);
        $('.magicnav-link').on('click',function() {
            $('html,body').animate(
                {scrollTop: $navTo.eq($(this).index()).offset().top+magicNav.settings.offset},
                magicNav.settings.duration,
                magicNav.settings.ease);
        });

        return magicNav;
    };

})(jQuery);

var magicNav = $.MagicNav($('.nav-links'),$('h3'),{titles:'text',offset:-10});

section {margin:25px;width:500px;}
h3{margin:30px 0 15px 0;}
h2{margin:50px 0 0 0;}
.magicnav-link { display:block; margin-bottom:5px;cursor:pointer;}
.magicnav-link:hover{color:red;}

<section>

            <nav class="nav-links"></nav>

            <h2>Sample</h2>

    <h3>Section.01 Tokyo</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <h3>Section.02 Osaka</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <h3>Section.03 Hakata</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <h3>Section.04 Kanagawa</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <h3>Section.05 Kyoto</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <h3>Section.06 Saitama</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <h3>Section.07 Nara</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <h3>Section.08 Hukuoka</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <h3>Section.09 Aomori</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</section>