zoukankan      html  css  js  c++  java
  • 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 () {
             /*回到頂部後的處理函數*/
        }
    });

     

  • 相关阅读:
    Node Js
    动态遍历接收的参数
    负载均衡和springcloud.Ribbon
    Spring Cloud
    springboot整合hibernate
    python模块知识总结
    什么是netty--通俗易懂
    IDEA 的操作与使用
    spring 整合guava
    log4j向指定文件输出日志
  • 原文地址:https://www.cnblogs.com/Zell-Dinch/p/4257695.html
Copyright © 2011-2022 走看看