滚动楼层插件学习记录

原作者原文链接：http://www.zhangweiwei.cn/2017/07/26/scroll/
只为记录一下以后可能用到。

在头部加一下移动设备上的viewport可以使用移动端中：

$(function() {

            var autoDirection = function(selector, timer, anim, max) {
                /*
                主要参数说明
                selector滚动区域导航的dom
                timer 动画运行的时间
                anim滚动动画效果
                max滚动区域数量-1，因为数组下标0开始计算
                */
                $(window).scroll(function() {
                    selector.each(function() {
                        if ($(document).scrollTop() > $(document).height() - $(window).height() - 5) {
                            selector.eq(max).addClass("active").siblings().removeClass();
                        } else if ($(document).scrollTop() > $("#" + $(this).attr("data-url")).offset().top - 5) {
                            $(this).addClass("active").siblings().removeClass();
                        }
                    })
                })

                selector.on('click', function(e) {
                    //动画在进行终止事件
                    if ($("html, body").is(":animated")) {
                        return false;
                    } else {
                        $("html, body").animate({
                            scrollTop: $("#" + $(this).attr("data-url")).offset().top + "px"
                        }, {
                            duration: timer,
                            easing: anim
                        });
                    }
                    e.stopPropagation();
                    e.preventDefault();
                })

            }
            //构造一个实例
            new autoDirection($(".nav a"), 600, 'easeInOutQuart', '3');
        })

html

    

        link1
        link2
        link3
        link4
    
    
1
    
2
    
3
    
4

css

 .section {
            width: 100%;
            height: 980px;
            background-color: red;
            text-align: center;
        }
        
        .section:nth-child(2) {
            background-color: yellow;
        }
        
        .section:nth-child(3) {
            background-color: blueviolet;
        }
        
        .section:nth-child(4) {
            background-color: orange;
        }
        
        .nav {
            width: 100%;
            height: 50px;
            position: fixed;
            left: 0;
            top: 0;
        }
        
        .nav a {
            color: #08f55a;
        }
        
        .nav a.active {
            color: black;
        }

样式重置：
http://www.zhangweiwei.cn/demo/reset.css
作者博客：http://www.zhangweiwei.cn/tags/#%E7%80%91%E5%B8%83%E6%B5%81