简易页面场景滚动的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);
合乎自然而生生不息。。。