• 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;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;100%;">2何问起</div>
        <div style="height:500px;100%;">3</div>
        <div style="height:500px;100%;">4</div>
        <div style="height:500px;100%;">5</div>
        <div style="height:500px;100%;">6 柯乐义</div>
        <div style="height:500px;100%;">7</div>
        <div style="height:500px;100%;">8 keleyi</div>
        <div style="height:500px;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

  • 相关阅读:
    mybatis-config.xml详解
    过滤器与拦截器
    Tomcat 部署web 项目
    Tomcat架构
    git stash
    AbstractQueuedSynchronizer 源码解读(转载)
    Kafka 转载
    Oracle数据库TNS详解
    Oracle建表知识全面详解
    Oracle高级教程
  • 原文地址:https://www.cnblogs.com/jihua/p/totop.html
Copyright © 2020-2023  润新知