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. tomcat 的优化配置

    一.关于并发连接量的配置 在tomcat的server.xml配置文件中:将<Connector port="8080" protocol="HTTP/1.1&qu ...

  2. Uiautomator 2.0之UiDevice新增API学习小记

    1. InstrumentationRegistry类 1.1. 类说明: 一个暴露的注册实例,持有instrumentation运行的进程和参数,还提供了一种简便的方法调用instrumentati ...

  3. C#设计模式系列：开闭原则（Open Close Principle）

    1.开闭原则简介 开闭原则对扩展开放,对修改关闭,开闭原则是面向对象设计中可复用设计的基石. 2.开闭原则的实现 实现开闭原则的关键就在于抽象,把系统的所有可能的行为抽象成一个抽象底层,这个抽象底层规 ...

  4. SQL Server中的高可用性（1）----高可用性概览

        自从SQL Server 2005以来,微软已经提供了多种高可用性技术来减少宕机时间和增加对业务数据的保护,而随着SQL Server 2008,SQL Server 2008 R2,SQL ...

  5. 鼠标mouse事件冒泡处理

    简单的鼠标移动事件: 进入 mouseenter:不冒泡 mouseover: 冒泡 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件 只有在鼠标指针穿过被选元素时,才会触发 m ...

  6. 亚马逊云架设WordPress博客

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 这篇文章介绍如何在亚马逊云架设WordPress博客.最强的云,加上最流行的建站工 ...

  7. 本地maven仓库使用及配置

    本地仓库的创建 下载 nexus-2.11.4-01-bundle.zip 解压并运行C:\nexus-2.11.4-01-bundle\nexus-2.11.4-01\bin\jsw\windows ...

  8. iOS开发之使用XMPPFramework实现即时通信(二)

    上篇的博客iOS开发之使用XMPPFramework实现即时通信(一)只是本篇的引子,本篇博客就给之前的微信加上即时通讯的功能,主要是对XMPPFramework的使用.本篇博客中用到了Spark做测 ...

  9. linux内核中的每cpu变量

    一.linux中的每cpu变量 看linux内核代码的时候,会发现大量的per_cpu(name, cpu),get_cpu_var(name)等出现cpu字眼的语句.从语句的意思可以看出是要使用与当 ...

  10. 【记录】ASP.NET MVC RegisterBundles

    1. Install the package from nuget Install-Package Microsoft.AspNet.Web.Optimization 2,BundleConfig 配 ...