jquery返回顶部，支持手机

效果体验：http://hovertree.com/texiao/mobile/6/

在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画，然后用到web移动端却没什么卵用，会出现滚动不流畅，卡顿，失灵等等现象。

这是因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况

为此，移动端判断次数好些，下面是具体实现代码，兼容pc：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>移动端返回顶部 - 何问起</title><base target="_blank" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <meta charset="utf-8" />

    <style>

        #tophovertree{display:block;position:fixed;width:36px;height:36px;right:20px;bottom:20px;cursor:pointer;background-image:url(http://hovertree.com/texiao/mobile/6/tophovertree.gif);opacity:0.9;display:none}

        a{color:blue}

    </style>

    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>

</head>

<body>

    <div style="height:500px;width:100%;">1

    <br />请向下滚动页码，你将会看到返回顶部的按钮。<br />

    <a href="http://hovertree.com/h/bjae/ve3erni6.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/menu/jquery/">jQuery</a>  <a href="http://hovertree.com/texiao/">特效</a>

        <br />  <script type="text/javascript" src="/themes/sy/gggg728x90a.js"></script>

    </div>

    <div style="height:500px;width:100%;">2何问起</div>

    <div style="height:500px;width:100%;">3</div>

    <div style="height:500px;width:100%;">4</div>

    <div style="height:500px;width:100%;">5</div>

    <div style="height:500px;width:100%;">6 柯乐义</div>

    <div style="height:500px;width:100%;">7</div>

    <div style="height:500px;width:100%;">8 keleyi</div>

    <div style="height:500px;width:100%;">9</div>

    <span id="tophovertree" title="返回顶部"></span>

    <script src="http://hovertree.com/texiao/mobile/6/topHovertree.js"></script>

    <script>

    $(function () { initTopHoverTree("tophov"+"ertree",500,30,20); })

    </script>

</body>

</html>

更多： http://www.cnblogs.com/jihua/p/webfront.html

jquery返回顶部，支持手机的更多相关文章

  1. jQuery返回顶部（精简版）

    jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...

  2. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  3. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  4. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  5. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  6. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  7. jquery返回顶部

    // 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...

  8. Jquery 返回顶部

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

随机推荐

  1. Ajax概要：

    Ajax概要: Ajax不是个全新的技术,它是多种技术合并在一起产生的,包括XHTML,CSS,JavaScript,XmlHttpRequest,XML,JSON,DOM等 优点:(这也解释了为何我 ...

  2. Excel 导入到Datatable 中，再使用常规方法写入数据库

    首先呢?要看你的电脑的office版本,我的是office 2013 .为了使用oledb程序,需要安装一个引擎.名字为AccessDatabaseEngine.exe.这里不过多介绍了哦.它的数据库 ...

  3. MongoDB 维护Replica Set

    在每个MongoDB(版本 3.2.9) Instance中,都有一个本地数据库(local),用于存储 Replication 进程的信息和本地数据.local 数据库的特性是:位于local数据库 ...

  4. SQL联合主键 查重

    2014年最后一天,今天在给数据库导入数据的时候,遇到一个问题,就是联合主键去重. 事情是这样的,现有一个表M,我想找个表中导入了许多数据,并需要将字段A(int)和B(int)联合设置为主键. 但是 ...

  5. .NET平台开源项目速览(11)KwCombinatorics排列组合使用案例(1)

    今年上半年,我在KwCombinatorics系列文章中,重点介绍了KwCombinatorics组件的使用情况,其实这个组件我5年前就开始用了,非常方便,麻雀虽小五脏俱全.所以一直非常喜欢,才写了几 ...

  6. 精确率与召回率，RoC曲线与PR曲线

    在机器学习的算法评估中,尤其是分类算法评估中,我们经常听到精确率(precision)与召回率(recall),RoC曲线与PR曲线这些概念,那这些概念到底有什么用处呢? 首先,我们需要搞清楚几个拗口 ...

  7. Hawk： 20分钟无编程抓取大众点评17万数据

    1. 主角出场:Hawk介绍 Hawk是沙漠之鹰开发的一款数据抓取和清洗工具,目前已经在Github开源.详细介绍可参考:http://www.cnblogs.com/buptzym/p/545419 ...

  8. Rust初步（七）：格式化

    在Rust中,如果要进行屏幕输出,或者写入到文件中,需要对数据进行格式化.这一篇总结一下它所支持的几种格式化方式. 这篇文章参考了以下官方文档,不过,按照我的风格,我还是会突出于C#语言的比较,这样可 ...

  9. 让你的Mac支持NTFS

    前段时间换成Mac电脑之后,发现有一点不爽,不能在Mac下写入NTFS格式的磁盘,所以就去研究了一下. 解决方法有如下三种. 第一种,直接使用第三方软件,如Paragon NTFS for MAC,T ...

  10. Unity之Animation动画

    Unity之Animation绘制动画 这篇文章做最简单的动画,让一个立方体从左边移动到右边. 1.创建一个Unity的新工程,名为TestAnimation,点击Create And Open按键, ...