返回顶部图片

http://hovertree.com/texiao/mobile/6/tophovertree.gif

具体实现代码

<span id="tophovertree" title="返回顶部"></span>
<style type="text/css">
#tophovertree{display:block;position:fixed;width:36px;height:36px;right:20px;bottom:20px;cursor:pointer;background-image:url(images/newVersion201608/tophovertree.gif);opacity:0.9;display:none}
</style>
<script type="text/javascript"> $(function () { initTopHoverTree("tophov"+"ertree",500,30,20); }); /* 使用方法:initTopHoverTree("tophovertree",500,30,20); }
tophovertree是返回顶部按钮的ID,500是返回顶部时间(毫秒),30是距离右边距离,20是距离底部距离*/ function initTopHoverTree(hvtid, times, right, bottom) { $("#" + hvtid).css("right", right).css("bottmo", bottom);
$("#" + hvtid).on("click", function () { goTopHovetree(times); }) $(window).scroll(function () {
if ($(window).scrollTop() > 268) {
$("#" + hvtid).fadeIn(100);
}
else {
$("#" + hvtid).fadeOut(100);
}
});
} //返回顶部动画
//goTop(500);//500ms内滚回顶部
function goTopHovetree(times) {
if (!!!times) {
$(window).scrollTop(0);
return;
} var sh = $('body').scrollTop();//移动总距离
var inter = 13.333;//ms,每次移动间隔时间
var forCount = Math.ceil(times / inter);//移动次数
var stepL = Math.ceil(sh / forCount);//移动步长
var timeId = null;
function aniHovertree() {
!!timeId && clearTimeout(timeId);
timeId = null;
//console.log($('body').scrollTop());
if ($('body').scrollTop() <= 0 || forCount <= 0) {//移动端判断次数好些,因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况
$('body').scrollTop(0);
return;
}
forCount--;
sh -= stepL;
$('body').scrollTop(sh);
timeId = setTimeout(function () { aniHovertree(); }, inter);
}
aniHovertree();
} </script>

  

jquery 返回顶部 兼容web移动的更多相关文章

  1. jquery返回顶部,支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  2. jQuery返回顶部(精简版)

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

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

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

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

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

  5. Jquery返回顶部插件

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

  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. Java 数组打印数组的 五种方法

    Arrays.toString(arr) for(int n: arr) System.out.println(n+", "); for (int i = 0; i < ar ...

  2. Debain下解决sublime无法输入中文

    sublime安装的方法在此不做过多介绍,网上有很多中教程的方式.本文描述在已经安装sublime的前提下如何输入中文. 1.保存下面的代码到文件sublime_imfix.c(位于~目录) #inc ...

  3. 【mysql】关于binlog格式

    写在前面的话 1.推荐用mixed,默认使用statement,基于上下文  set session/global binlog_format=mixed; 2.二进制日记录了数据库执行更改的操作,如 ...

  4. 搭建SVN服务器

    系统环境:CentOS 6.6   首先查看服务器上是否已安装了svn # rpm -qa subversion 如果没有安装,则执行此命令 # yum list subversion         ...

  5. JSON学习笔记一 —— 一些与移动端交互产生JSON数据的方法

    /**     * 测试的返回JSon方法,正式的不会用     * @author MrHandler     * @param reqCode     * @param joinStr     * ...

  6. java.io.NotSerializableException: test.io.file.Student

    java.io.NotSerializableException: test.io.file.Student    at java.io.ObjectOutputStream.writeObject0 ...

  7. [poj1741][tree] (树/点分治)

    Description Give a tree with n vertices,each edge has a length(positive integer less than 1001). Def ...

  8. Multiply Strings

    Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...

  9. [LeetCode] Encode String with Shortest Length 最短长度编码字符串

    Given a non-empty string, encode the string such that its encoded length is the shortest. The encodi ...

  10. Android开发之扫描二维码开发

    原贴地址:http://www.cnblogs.com/Fndroid/p/5540688.html 二维码其实有很多种,但是我们常见的微信使用的是一种叫做QRCode的二维码,像下面这样的,可以放心 ...