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); 
            });
        },
  • 相关阅读:
    声明函数的是方式
    数组的相关属性和函数
    JS选择结构
    JS数据类型
    JS 运算符
    JS 变量
    响应式布局
    css的flex属性
    CSS中的度量单位
    BFC 规则
  • 原文地址:https://www.cnblogs.com/xzma/p/7371882.html
Copyright © 2011-2022 走看看