JS 回到顶部插件

发布时间:2020-10-03 21:48:49 作者:v512345
来源:网络 阅读:309

=====================js==============

;(function($){
    $.extend({
        myScrollUp:function(options){
        
        
            var defaults={
                    scrollName:"scrollUp",
                    topDistance:"300",
                    topSpeed:300,
                    animation:"slide",
                    animationInSpeed:200,
                    animationOutSpeed:200,
                    scrollText:"回到顶部",
                    activeOverlay:false
                }
            <!--覆盖默认值-->
            var defaults=$.extend(defaults,options);
            
            
            var sn="#"+defaults.scrollName,
                td=defaults.topDistance,
                ts=defaults.topSpeed,
                an=defaults.animation,
                is=defaults.animationInSpeed,
                os=defaults.animationOutSpeed,
                st=defaults.scrollText,
                ao=defaults.activeOverlay;
            
            
            
            /*添加a标签和样式*/
             $("<a/>",{id:defaults.scrollName,title:st,text:st,herf:"#top"}).appendTo("body");
            // $(sn).css({"position":"fixed","display":"none","z-index":"123456789"});
            
            
            if(ao){
                $("body").append("<div id='"+defaults.scrollName+"-active'></div>" );
                $(sn+"-active").css({"position":"absolute","top":td+"px","width":"100%","border-top":"1px dotted "+ao,"z-index":"2147483647"})
            }
            
            /*滚动事件*/
            $(window).scroll(function(){
                if(an==="fade")
                    $($(window).scrollTop()>td?$(sn).fadeIn(is):$(sn).fadeOut(os));
                else if(an==="slide")
                    $($(window).scrollTop()>td?$(sn).slideDown(is):$(sn).slideUp(os));
                else
                    $($(window).scrollTop()>td?$(sn).show():$(sn).hide());
            });
            
            /*点击*/
            $(sn).click(function(event){
                $("html, body").animate({scrollTop:0},ts);
                return false
            })
            
        }
    })
})(jQuery);




==================html页面引入使用=========================

$.myScrollUp({
        scrollName:"scrollUp",
        topDistance:"300",
        topSpeed:300,
        animation:"slide",
        animationInSpeed:200,
        animationOutSpeed:200,
        scrollText:"回到顶部",
        activeOverlay:true
    });

推荐阅读:
  1. js中的继承
  2. BackToTop.js 为你的网站添加“回到顶部”按钮

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js 回到 顶部插件

上一篇:Android实现带数字的圆形进度条(自定义进度条)

下一篇:OracleVM Manager 安装

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》