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. PHP 基础知识测试题 答案分析

    一:选择题(单项选择,每题2分): 1． LAMP具体结构不包含下面哪种(A      ) A:Windows系统              如果是这个就是WMP B:Apache服务器 C:MySQ ...

  2. Python框架之Tornado（一）

    本系列博文计划: 1.剖析基于Python的Web框架Tornado的源码 2.为Python开发一个完善的MVC框架 首先将带着大家一起来剖析基于python编写的Web框架 tornado ,本着 ...

  3. PHP SESSION机制,从存储到读取

    PHP中,如果要获取SESSION数据,必须要有对应的session_id,session_id的获取方式有两种 1.基于客户端的cookie 2.基于url 先说第一种情况,基于客户端的cookie ...

  4. sql复习第四次

    1.关系操作的特点是集合操作 2.关系模型的完整性规则包括实体完整性规则,参照完整性规则,用户定义的完整性规则 3.rou联接运算是由笛卡儿积和选择操作组合而成的 4.自然联接运算是由笛卡儿积,选择, ...

  5. 浅谈ThinkPHP3.2的子域名部署和路由优化（一）

    前言:建立一个网站系统,往往包含多个子网站,例如PC官网,移动端官网,后台管理,数据源自一个相同的数据库,整个架构上,从ThinkPHP来看,可以大体理解为Model(M)是一样的,Controlle ...

  6. JSDeferred 源码分析

    不经意看到了一个构思非常惊人的异步流程控制库,发出来分享下 http://cho45.stfuawsc.com/jsdeferred/ 关于CommonJS Promises请看另一个异步库 http ...

  7. Bower : ENOGIT git is not installed or not in the PATH

    解决方法一: 添加git到window的环境变量中.设置path路径为C:\Program Files\Git\bin 解决方法二: $ set PATH=%PATH%;C:\Program File ...

  8. 从客户端(&)中检测到有潜在危险的 Request.Path 值

    首先,这个问题出现在 ASP.NET MVC 应用程序中,所以下面的解决方式都是在这个环境下. 关于这个问题,网上又很多的答案,当时也搜了一些: A potentially dangerous Req ...

  9. Hive创建表格报【Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. MetaException】引发的血案

    在成功启动Hive之后感慨这次终于没有出现Bug了,满怀信心地打了长长的创建表格的命令,结果现实再一次给了我一棒,报了以下的错误Error, return code 1 from org.apache ...

  10. C# Excel 为图表添加模拟运算表

    Excel中的图表能够将数据可视化,方便我们比较分析数据.但也有一定的局限,例如:不能够直接从图表中读出原来数据的准确值.Excel提供的解决方案是,在图表下方添加一个模拟运算表,即在坐标轴下方添加包 ...