scrollAnimate Plugin

by Jayson Buquia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="wrapper">
    <section>
        <ul>
            <li><a href="#1">Default Link</a></li>
            <li><a href="#2" data-scroll>Animated</a></li>
            <li><a href="#3" data-scroll>Lorem3</a></li>
            <li><a href="#4" data-scroll>Lorem4</a></li>
            <li><a href="#5" data-scroll>Lorem5</a></li>
        </ul>
    </section>
    <section id="1"><h1>Default Link (Not animated)</h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est perferendis dolore eum alias culpa sit non. Consectetur velit ratione culpa officia recusandae in minima corporis nam harum quisquam cum cumque.</section>
    <section id="2"><h1>Lorem2</h1>Cum dolores architecto quidem labore quibusdam. Dolor voluptatum quod quaerat perspiciatis natus tempora quas voluptates explicabo dignissimos eligendi tempore cum libero fuga corporis exercitationem aspernatur ipsa. Hic labore cumque. Error.</section>
    <section id="3"><h1>Lorem3</h1>Quas harum eius inventore nostrum ut? At obcaecati assumenda quibusdam odio maiores. Vel suscipit nemo quo natus tempore quaerat quidem debitis dolore odio possimus nam aliquid consectetur maxime sequi cupiditate!</section>
    <section id="4"><h1>Lorem4</h1>Officiis aliquid maiores at magni amet delectus esse. Blanditiis nisi dolor aperiam laborum ducimus fuga amet expedita temporibus. Velit ipsum hic quae sed distinctio in accusamus sit tenetur consequatur fugiat!</section>
    <section id="5"><h1>Lorem5</h1>Magnam illo incidunt natus reprehenderit mollitia id consequuntur dolor ipsa saepe et dolorem dolore sint eos maxime quasi explicabo eveniet. Neque ad quo consequatur sunt architecto ratione officiis voluptate magni.</section>
</div>

CSS

ul {
    text-align: center;
}
ul li {
    list-style: none;
    text-align: center;
    display: inline-block;
    padding: 5px 10px;
}

section {
    height: 100vh;
    padding: 20px 5px;
}

JavaScript

// the scrollAnimate plugin
;(function($,window,document,undefined){

    var scrollAnimate = (function(){
        
        

        // scrollObj Class
        var scrollObj = function(elem){
        
            var obj = this,
                targetId = elem.attr('href'),
                targetElem = $(targetId),
                targetTop = targetElem.offset().top,
                speed = (Math.ceil(targetTop/1000))*500 ;
            
            elem.click(function(e){
                e.preventDefault();
                $('html,body').animate({
                    scrollTop : targetTop
                },speed,'easeInOutQuint');
            });
            
        }
        
        
        return {
            init : function(){
                $('[data-scroll]').each(function(){
                    var scrollObjIns = new scrollObj($(this));
                });
            }
        };        
        
    })();
    
    $(document).ready(function(){
        scrollAnimate.init();
    });

})(jQuery,window,document,undefined);