JS 回到顶部插件

Posted 2020-07-26

=====================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
    });