zoukankan      html  css  js  c++  java
  • JQ 移动端返回顶部,往下滑动时显示返回按钮,往上滑动时隐藏返回按钮

    returnTop:function(){
            //预定义返回顶部的html代码,它的css样式默认为不显示 
            var gotoTop_html = '<div class="returnTop"></div>'; 
            //将返回顶部的html代码插入页面上id为page的元素的末尾 
            
            $(".ding_C_returnTop").append(gotoTop_html); 
                var windowTop=0;//初始话可视区域距离页面顶端的距离
            $(document).scroll(function() {
                var scrolls = $(this).scrollTop();//获取当前可视区域距离页面顶端的距离
                if(scrolls>=windowTop){//当B>A时,表示页面在向上滑动
                    //需要执行的操作
                    windowTop=scrolls;
                    $(".ding_C_returnTop").hide();
                    console.log("上")
                }else{//当B<a 表示手势往下滑动
                    //需要执行的操作
                    console.log("下")
                    windowTop=scrolls;
                    $(".ding_C_returnTop").show();
                }
            });
            $(".ding_C_returnTop").show();
            $(".ding_C_returnTop").click(//定义返回顶部点击向上滚动的动画 
                function(){$('html,body').animate({scrollTop:0},700); 
            });
        },
  • 相关阅读:
    中国用户mac上快速安装nodejs
    移动前端的开发痛点
    前端模块化思考
    tcpdump学习
    curl 同时发送多个请求
    apache 做http代理
    文件 FIFO队列
    mysql多表字段名重复的情况
    时间戳实现增量数据同步
    python 学习
  • 原文地址:https://www.cnblogs.com/xzma/p/7371882.html
Copyright © 2011-2022 走看看