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); 
            });
        },
  • 相关阅读:
    作业三(3)
    作业三(2)
    作业三(1)
    作业2(2)
    作业2(1)
    通读《构建之法》后有感
    自我介绍
    页面从服务器中浏览并添加图片显示
    lamda表达式 随机取数据的方法
    对js插件uploadify的一些操作
  • 原文地址:https://www.cnblogs.com/xzma/p/7371882.html
Copyright © 2011-2022 走看看