简易页面场景滚动的jquery插件

(function($){
    $.extend($.fn, {
        scene_scroll:function(arg_obj){
            // 参数检测
            // 场景数组
            var $scene_arr = arg_obj.$scene_arr || (function(){console.log("没有场景数组,请设置$scene_arr");})(),
            // 导航数组
            $nav =  arg_obj.$nav || (function(){console.log("没有导航数组,请设置$nav");})(),
            // 导航的触发事件类型
            event_name = arg_obj.event_name || "click",
            // 速度
            speed = arg_obj.speed || 400,
            // 滚动完成后的回调函数
            scroll_callback = arg_obj.scroll_callback || (function(){return function(){}})(),
            // 是否组织事件冒泡和默认动作
            stop_next_event = arg_obj.stop_next_event || false,

            nav_height_arr = [0],
            chrome_browser_flag = navigator.userAgent.indexOf("AppleWebKit");

            $scene_arr.each(function(){
                var div_height = $(this).height();
                nav_height_arr.push(div_height)
            });
            $nav.on(event_name,function(){
                var pos = $.inArray(this, $(".nav").find("a"));
                var sum_pos = 0;
                
                for(var i=0; i<=pos; i++){
                    sum_pos = sum_pos + nav_height_arr[i];
                }
                
                // chrome滚动
                (chrome_browser_flag > -1 ) ? $("body").animate({scrollTop:sum_pos}, speed, scroll_callback):
                // IE,Firefox滚动
                $(document.documentElement).animate({scrollTop:sum_pos}, speed, scroll_callback);
                if(!stop_next_event) return false;

            });
        }
    })
})(jQuery);

 

posted @ 2013-09-12 17:38  草珊瑚  阅读(292)  评论(0编辑  收藏  举报