jquery返回顶部,支持手机
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返回顶部,支持手机的更多相关文章
- jQuery返回顶部(精简版)
jQuery返回顶部(精简版) <!DOCTYPE html><html lang="en"><head> <meta charset=& ...
- jQuery返回顶部实用插件YesTop
只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...
- jquery返回顶部和底部插件和解决ie6下fixed插件
(function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...
- Jquery返回顶部插件
自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
- jquery返回顶部特效
<style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...
- jquery返回顶部
// 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...
- Jquery 返回顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- jQuery返回顶部代码
页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...
随机推荐
- Sql Server系列:通用表表达式CTE
1 CTE语法WITH关键字 通用表表达式(Common Table Express, CTE),将派生表定义在查询的最前面.要使用CTE开始创建一个查询,可以使用WITH关键字. CTE语法: WI ...
- jQuery源码分析系列(40): 动画设计
前言 jQuery动画是通过animate这个API设置执行的,其内部也是按照每一个animate的划分封装了各自动画组的行为, 包括数据过滤.缓动公式.一些动画默认参数的设置.元素状态的调整.事件的 ...
- iOS开发之使用XMPPFramework实现即时通信(一)
关于XMPP的理论介绍在本篇博客中就不做赘述了,如何在我们之前的微信中加入XMPP协议来实现通信呢?下面将会介绍一下XMPP的基本的知识,让我们的微信可以实现互联通信.要做的准备工作是要有服务器支持X ...
- 修改USB固件库的Customer_HID例程
我用的是神州三号开发板子,板子的USB模块原理图为: 配置端口G的11号引脚为usb的使能引脚,按理来说应该是开漏输出的(看了很多的修改代码都是这个模式),不过就是不能使能usb,只能配置成推挽的才行 ...
- 三行代码接入,社交软件打字时底下弹出的表情布局,自定义ViewPager+页面点标+各种功能的android小框架。
(转载请声明出处:http://www.cnblogs.com/linguanh/) 前言: 接上次分享的 ListView 动态加载类,入口:http://www.cnblogs.com/lingu ...
- AVFoundation播放视频时显示字幕,切换音轨
主要用到两个类:AVMediaSelectionGroup 和 AVMediaSelectionOption 调用 AVAsset对象的availableMediaCharacteristicsWit ...
- 【jQuery小实例】---2自定义动画
---本系列文章所用使用js均可在本博客文件中找到 本节用jQuery完一个简易的动画效果,一个小驴跑跑的效果.和一个类似qq面板效果.大致也分为三步:添加jquery-1.8.3.js文件.这个是不 ...
- 去百度API的百度地图准确叠加和坐标转换的解决方案研究
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 目前项目上如果要使用百度地图,得加载百度的开发包,然后通过百 ...
- Android中Application的应用
当android程序启动时系统会创建一个 application对象,用来存储系统的一些信息.通常我们是不需要指定一个Application的,这时系统会自动帮我们创建,如果需要创建自己 的Appli ...
- CloudNotes之桌面客户端篇:增强的笔记列表
今天,我发布了CloudNotes的一个更新版本:1.0.5484.36793.这个版本与1.0.5472.20097不同的是,它拥有增强的笔记列表,与之前单调的列表系统相比,新的笔记列表不仅可以显示 ...