• 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 () {
             /*回到頂部後的處理函數*/
        }
    });

     

  • 相关阅读:
    Delphi编写星光效果
    网格动画
    在窗体边框上画图
    algebra单元
    CMOS单元
    类似于Split(VB)的函数
    利用PHPLIB加入模板功能
    随机产生一个中文
    测试PHP
    获得指定后缀名的文件数
  • 原文地址:https://www.cnblogs.com/Zell-Dinch/p/4257695.html
Copyright © 2020-2023  润新知