Jquery scrollTop animate 實現動態滾動到頁面頂部

這個方法之前都是用的錨點實現的，但是效果僵硬，動感不足！

之後參考了一些網站，發現都是用的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 () {
         /*回到頂部後的處理函數*/
    }
});

 

　

转载于:https://www.cnblogs.com/Zell-Dinch/p/4257695.html