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 () {

         /*回到頂部後的處理函數*/

    }

});

 

 

你可能感兴趣的:(scrollTop)