JQ 移动端返回顶部,往下滑动时显示返回按钮,往上滑动时隐藏返回按钮
Posted https://blog.zlevai.com
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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); }); },
以上是关于JQ 移动端返回顶部,往下滑动时显示返回按钮,往上滑动时隐藏返回按钮的主要内容,如果未能解决你的问题,请参考以下文章
React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)