随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

最新评论

1. Re:留言列表模板HTML代码
1
--让星星跟你道晚安
2. Re:程序员用HTML5制作的爱心树表白动画
@一梦逍遥3 换一个Html...
--剑起苍穹
3. Re:程序员用HTML5制作的爱心树表白动画
@剑起苍穹我也是这样，不知道怎么解决...
--一梦逍遥3
4. Re:Web前端资源汇总
推荐：2021年百度大牛亲授最详细、最全面的前端视频教程：
--码农农农
5. Re:Web前端资源汇总
《JavaScript设计模式》作者张容铭讲解2021年史上最全前端教程免费分享，需要的私聊
--CLH_zza

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>