<!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="{MODULE_URL}template/images/top.png" 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>

手机端网页返回顶部js代码的更多相关文章

  1. 弹性返回顶部JS代码

    弹性返回顶部JS代码 弹性返回顶部JS代码点击下载

  2. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  3. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  4. js网页返回顶部和楼层跳跃的实现原理

    这是简单的效果图. (实现楼层间的跳跃,主要依靠的是 window.scrollTo(x,y)方法 ,将浏览器的可见区域移动到指定的x,y坐标上.)   说楼层跳跃前,先温习下,一般网页在高度较大时, ...

  5. javascript实现网页返回顶部功能

    在浏览网页时,我们一般是拖动滚动条向下滑动,浏览下面的内容,当页面超过单页时,右下角会出现一个回到顶部的图标,有些网站这个图标一直显示在右下角的. 有些网站使用锚链接来实现页面内容的跳转,但这种效果的 ...

  6. 网页返回顶部之animate方法

    点击返回顶部按钮,页面滑动形式回到顶部! HTML代码: <div id="ctop">回到<br>顶部</div> CSS代码: #ctop{ ...

  7. 手机端网页使用html5地理定位获取位置失败的解决办法

    网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...

  8. gotoTop返回顶部 JS

    方法: 1.首先在body添加一个标签,在一个页面添加,其它页面也会生效. <body> <a name="top"> 2.然后在页脚添加一个链接 < ...

  9. ECSHOP返回顶部的代码 纯CSS超简单

    在themes/模板文件夹/library/page_footer.lbi 文件的最末尾加上下面的一段代码 <style>.to_top{width:20px;height:59px;ri ...

随机推荐

  1. stm32 GPIO之怪异现象

    1.今天调试GPIO,检测高低电平,插入HDMI为高,不插为低,其他3口均可以检测,唯独PB2口一直检测为高,且电平明显和其他3 port不一样 插上hdmi源,PB2=4.6V,其他3口 = 3.6 ...

  2. Struts2-01

    一.Struts2的介绍 讲Struts2框架之前,我们需要知道框架是什么呢?估计大多数初学者都只知道其名却不知其意,框架就是一个半成品,别人将一些功能已经写好了,我们只需要拿来用即可,像我们之前使用 ...

  3. linuxc - entos 7.3 开放端口并对外开放

    1. 查看已打开的端口 # netstat -anp 2. 查看想开的端口是否已开 # firewall-cmd --query-port=666/tcp 若此提示 FirewallD is not ...

  4. 由Oracle 11g SYSAUX 和 SYSTEM 表空间回收引发的联想

    0x00--目的 整理一下以前一个SYSTEM表空间和SYSAUX表空间使用率达到99%上限的处理思路和相关知识点,好记性不如烂笔头 0x01--表空间使用率现状 通过查询可得知目前表空间使用情况如下 ...

  5. 【LightOJ 1081】Square Queries（二维RMQ降维）

    Little Tommy is playing a game. The game is played on a 2D N x N grid. There is an integer in each c ...

  6. 剑指Offer_编程题之从尾到头打印链表

    题目描述 输入一个链表,从尾到头打印链表每个节点的值.

  7. Ajax实现下载进度条

    可以通过设置一个XMLHttpRequest对象的 responseType 属性来改变一个从服务器上返回的响应的数据类型.可用的属性值为空字符串 (默认), "arraybuffer&qu ...

  8. Java代码注释

    单行注释: 选中代码,按下ctrl+/ 一条代码单行注释:选中一条代码按下ctrl+/,则为一条代码单行注释: 多条代码单行注释:选中多条代码按下ctrl+/,则为多条代码单行注释: 取消注释:对已经 ...

  9. mqtt使用一

    最近做的一个项目用到了mqtt协议,我需要从第三方订阅主题接受消息,还需要自己搭建,mqtt服务器去发布主题.下面就详细介绍一下环境的搭建和使用. 1.mqtt介绍 MQTT是一个基于客户端-服务器的 ...

  10. api帮助文档的制作

    在java开发中,往往需要用到别人写的类或是自己写的类被别人拿去用. 而使用类的过程中,类中的方法对使用者而言并不完全透明,这个时候帮助文档可以让我们清楚的了解这个类中的方法该如何调用. 下面简述一下 ...