這個方法之前都是用的錨點實現的,但是效果僵硬,動感不足!
之後參考了一些網站,發現都是用的js,於是自己想到用jquery 來做一個插件也來實現以下這個小功能。
$.fn.backTop = function (options) {/*back & scroll to top */ var defaults = { speed : 1000 //滾動到頂部的速度設置 單位是毫秒 ,mouseEvent: "click"//事件觸發類型 ,scrollTop:600 //配置滾動多少距離後出現“top”按鈕 ,callback:function() {//animate(css,speed,callback);中的callback alert(1); } ,initScroll: function () { $(window).bind('scroll',function () { var top = $(this).scrollTop(); if(top>=options.scrollTop) {//配置滾動多少距離後出現“到頂部”按鈕 $("#backTop").fadeIn(500);return false; } else { $("#backTop").fadeOut(500);return false; } }) } } ,options = $.extend(defaults,options); options.initScroll();//實現滾動到一定文職自動出現“到頂部”按鈕 return this.each(function () { var $this = $(this); $this.bind(options.mouseEvent,function(e){ if(/webkit/.test(navigator.userAgent.toLowerCase())){ var dom = $("body");//如果是webkit內核的瀏覽器,滾動條是body } else { var dom = $("html");//否則滾動條是html } dom.animate({scrollTop:"0"},options.speed,function () { options.callback(); }); e.stopPropagation(); }) }) }
調用方法:
$("#back-top").backTop({ "scrollTop": 600 ,"speed":600 ,callback:function () { /*回到頂部後的處理函數*/ } });