手机端网页返回顶部js代码_最优秀的QQ技术网_最专业的网络资源收集平台_小辉资源网分享_小刀娱乐网

手机端网页返回顶部js代码

2020-9-3 761 0

手机端网页返回顶部js代码

代码如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>手机端网页返回顶部js代码</title> 
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
</head> 
<body style="background-color: #dddfff;"> 
    <div class="headeline"></div> 
    <p style="font-size:24px;color:red;text-align: center;">手机往下滑动即可显示返回顶部按钮!</p> 
    <!--演示内容开始--> 
    <div style="height:2000px;"></div> 
    <!--演示内容结束--> 
</body> 
<script>
    var scrolltotop={
        setting:{
            startline:100, //起始行
            scrollto:0, //滚动到指定位置
            scrollduration:400, //滚动过渡时间
            fadeduration:[500,100] //淡出淡现消失
        },
        controlHTML:'<img src="https://ae02.alicdn.com/kf/U6f03eab03e6b483fab21ae469d3352caB.jpg" style="width:32px;height:32px;border:0;" />', //返回顶部按钮
        controlattrs:{offsetx:30,offsety:80},//返回按钮固定位置
        anchorkeyword:"#top",
        state:{
            isvisible:false,
            shouldvisible:false
        },scrollup:function(){
            if(!this.cssfixedsupport){
                this.$control.css({opacity:0});
            }
            var dest=isNaN(this.setting.scrollto)?this.setting.scrollto:parseInt(this.setting.scrollto);
            if(typeof dest=="string"&&jQuery("#"+dest).length==1){
                dest=jQuery("#"+dest).offset().top;
            }else{
                dest=0;
            }
            this.$body.animate({scrollTop:dest},this.setting.scrollduration);
        },keepfixed:function(){
            var $window=jQuery(window);
            var controlx=$window.scrollLeft()+$window.width()-this.$control.width()-this.controlattrs.offsetx;
            var controly=$window.scrollTop()+$window.height()-this.$control.height()-this.controlattrs.offsety;
            this.$control.css({left:controlx+"px",top:controly+"px"});
        },togglecontrol:function(){
            var scrolltop=jQuery(window).scrollTop();
            if(!this.cssfixedsupport){
                this.keepfixed();
            }
            this.state.shouldvisible=(scrolltop>=this.setting.startline)?true:false;
            if(this.state.shouldvisible&&!this.state.isvisible){
                this.$control.stop().animate({opacity:1},this.setting.fadeduration[0]);
                this.state.isvisible=true;
            }else{
                if(this.state.shouldvisible==false&&this.state.isvisible){
                    this.$control.stop().animate({opacity:0},this.setting.fadeduration[1]);
                    this.state.isvisible=false;
                }
            }
        },init:function(){
            jQuery(document).ready(function($){
                var mainobj=scrolltotop;
                var iebrws=document.all;
                mainobj.cssfixedsupport=!iebrws||iebrws&&document.compatMode=="CSS1Compat"&&window.XMLHttpRequest;
                mainobj.$body=(window.opera)?(document.compatMode=="CSS1Compat"?$("html"):$("body")):$("html,body");
                mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+"</div>").css({position:mainobj.cssfixedsupport?"fixed":"absolute",bottom:mainobj.controlattrs.offsety,right:mainobj.controlattrs.offsetx,opacity:0,cursor:"pointer"}).attr({title:"返回顶部"}).click(function(){mainobj.scrollup();return false;}).appendTo("body");if(document.all&&!window.XMLHttpRequest&&mainobj.$control.text()!=""){mainobj.$control.css({width:mainobj.$control.width()});}mainobj.togglecontrol();
                $('a[href="'+mainobj.anchorkeyword+'"]').click(function(){mainobj.scrollup();return false;});
                $(window).bind("scroll resize",function(e){mainobj.togglecontrol();});
            });
        }
    };
    scrolltotop.init();
</script> 
</html>

Plugins by frpkj.com

下载地址：

文件名称：手机端网页返回顶部js代码

文件大小：4KB适用版本：PC

更新日期：2020-09-03作者信息：小辉网络

点击下载 查看演示

上一篇: 网页返回顶部js小火箭回到顶部_jquery小火箭返回顶部

下一篇: HTTP状态码常见的网站错误代码大全