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. ArchLinux+Win10双系统的Grub配置

    解决:ArchLinux+Win10双系统,Grub设置 原装的Win10,装完ArchLinux后,要进入Win10一段时间只能通过boot选择. Grub的菜单里并没有.Grub安装过程是参考wi ...

  2. SQL Server DDL触发器运用

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 基础知识(Rudimentary Knowledge) DDL运用场景(DDL Scene) ...

  3. Spring(二)scope、集合注入、自动装配、生命周期

    原文链接:http://www.orlion.ga/189/ 一.scope bean的scope属性中常用的有两种:singleton(单例,默认)和prototype(原型,每次创建新对象) 例: ...

  4. .Net 转战 Android 4.4 日常笔记（6）--Android Studio DDMS用法

    Android Studio DDMS与Eclipse DDMS大同小异,下面了解DDMS的使用 DDMS(Dalvik Debug Monitor Service )Dalvik调试监控服务 DDM ...

  5. 【原创】开源Math.NET基础数学类库使用(08)C#进行数值积分

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  6. Visual Studio常用小技巧一：代码段+快捷键+插件=效率

    用了visual studio 5年多,也该给自己做下备忘录了.每次进新的组换新的电脑,安装自己熟悉的环境又得重新配置,不做些备忘老会忘记一些东西.工具用的好,效率自然翻倍. 1,代码段 在Visua ...

  7. Hive Tutorial（上）（Hive 入门指导）

    用户指导 Hive 指导 Hive指导 概念 Hive是什么 Hive不是什么 获得和开始 数据单元 类型系统 内置操作符和方法 语言性能 用法和例子(在<下>里面) 概念 Hive是什么 ...

  8. iOS 使用EZAudio库生成wav出错的情况

    使用EZAudio库 录M4A格式可以参考该库例子中的代码. 录wav格式得改下源码.看下面的代码 AVAudioSession *session = [AVAudioSession sharedIn ...

  9. CSS3实现圆形进度条

    介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...

  10. 通过手动创建统计信息优化sql查询性能案例

    本质原因在于:SQL Server 统计信息只包含复合索引的第一个列的信息,而不包含复合索引数据组合的信息 来源于工作中的一个实际问题, 这里是组合列数据不均匀导致查询无法预估数据行数,从而导致无法选 ...