Add wp-link-pages to post

I am answering my own question.

Here is the javascript that I wrote which works 100% smooth.

<script>
$(document).on("scroll mousedown DOMMouseScroll mousewheel keydown", function (e) {
    if (e.which > 0 || e.type === "mousedown" || e.type === "mousewheel") {
        $('html,body').stop();
    }
});


pageSize = 1;

showPage = function(page) {
    $(".comix").hide();
    $(".comix").each(function(n) {
        if (n >= pageSize * (page - 1) && n < pageSize * page)
            $(this).show();

    });        
}

showPage(1)

$("#pagin li").click(function() {
    $("#pagin li").removeClass("current");
    $(this).addClass("current");
                $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 400);

    showPage(parseInt($(this).text())) 
});

    $('#pagin li').each(function(i) {
    if ( i === 1 ) {
       $(this).addClass('current');
    }
});

var $first = $('li:first', 'ol'),
    $last = $('li:last', 'ol');

$(document).keydown(function(e){
    if (e.keyCode === 39) { 
        var $next, $selected = $(".current");
            $next = $selected.next('li').length ? $selected.next('li') : $first;
            $selected.removeClass("current");
            $next.addClass("current");
            $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 400);
            showPage(parseInt($next.text())) 
    }
});


$(document).keydown(function(e){
    if (e.keyCode === 37) { 
            var $prev, $selected = $(".current");

            $prev = $selected.prev('li').length ? $selected.prev('li') : $last;
            $selected.removeClass("current");
            $prev.addClass("current");
            $('html, body').animate({scrollTop: $(".single-post-content").offset().top}, 400);
            showPage(parseInt($prev.text())) 

}
    });


</script>