1、h5端页面滑动至第3屏及以后才出现置顶按钮

 $(document).scroll(function() {
var scroH = $(document).scrollTop(); //滚动高度
var viewH = $(window).height(); //可见高度
if(scroH > 3*viewH){
_appCache.$goToTop.show();
}else{
_appCache.$goToTop.hide();
}
})

2、滚动的时候,置顶按钮隐藏,停止滚动3s后,滚动按钮出现

$(document).scroll(function() {
_appCache.$goToTop.addClass('hide');
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
_appCache.$goToTop.removeClass('hide');
}, 3000));
})

3、滑动到顶部

 _appCache.$goToTop.click(function(){
$('html,body').animate({
scrollTop: 0
}, 1000);
});

  

jquery 滚动事件-记录自己常用的的更多相关文章

  1. jquery滚动事件

    滚动到一定高度: $(window).scroll(function(){ var scrollTop = $(document).scrollTop(); && scrollTop ...

  2. jquery 滚动事件

    $(window).scroll(function () { if ($(window).scrollTop() >50) {  alert('show!!'); }});

  3. jQuery事件绑定与常用事件

    jQuery事件与js类似,只是在名称上将前面的on去掉了,例如jQuery的click.mousedown.keypress事件.jQuery绑定事件有2种方法,下面用最基本的例子做演示. ①直接绑 ...

  4. jquery键盘事件全记录

    很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...

  5. [转]使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 事件详解

    在前文<使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础>中,Kayo 对 jQuery Mobile 事件的基 ...

  6. JQuery常见事件

    ##### 事件 onclick 单机事件 ondblclick 双击事件 onmouseover 鼠标穿过 (子盒子独立) onmouseout 鼠标出去 onmouseenter 鼠标进入 (子盒 ...

  7. python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  8. ios中iframe的scroll滚动事件替代方法

    在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE h ...

  9. jQuery的事件机制和其他知识

    jQuery 设置宽度和高度 宽度操作: $(selector).height(); //不带参数表示获取高度 $(selector).height(200); //带参数表示设置高度   宽度操作: ...

随机推荐

  1. koa 项目实战(五)全球公用头像的使用

    1.安装模块 npm install gravatar --save 2.使用 根目录/routes/api/users.js const gravatar = require('gravatar') ...

  2. TensorFlow 学习(4)——MNIST机器学习进阶

    要进一步改进MNIST学习算法,需要对卷积神经网络进行学习和了解 学习材料参见https://www.cnblogs.com/skyfsm/p/6790245.html 卷积神经网络依旧是层级网络,只 ...

  3. python处理文件---每行末尾加上字符

    题记:该代码是项目中需要处理一个文件,所以使用python去处理,还有另外一个方法就是使用notepad++的正则替换,这里就只是使用python脚本去处理了. 我想只要你懂一门语言,就很容易处理这个 ...

  4. 阶段3 3.SpringMVC·_05.文件上传_6 文件上传之跨服务器上传代码

    参数HttpServletRequest也可以删掉  扩服务器的代码 注意选择jersey包下的 拿到文件资源.put过去. 最终代码 重新部署springMvc 图片服务器正常运行 客户端服务器 服 ...

  5. npm install --save 和 npm install -d的区别

    npm install -d 就是npm install --save-dev npm insatll -s 就是npm install --save 以前一直在纠结一个npm安装的包依赖管理的问题. ...

  6. 5、kubernetes资源清单定义入门

    使用配置清单创建资源 定义pod时使用yaml格式 master ~]# kubectl get pod NAME READY STATUS RESTARTS AGE client / Error 1 ...

  7. Python之文件操作工具

    逐步完善中. #!/usr/bin/python3 # -*- coding: utf-8 -*- import os import codecs #支持多国语言的编码解码 import charde ...

  8. Day03:日期操作 / 集合框架(上)

    日期操作 Java中的时间 · Java中的时间使用标准类库的Date类表示,是用距离一个固定时间点的毫秒数(可正可负,long类型)表达一个特定的时间点: · 固定的时间点叫纪元(epoch),是U ...

  9. app测试基础知识之命令

    app测试点:功能测试,安全测试,用户体验测试,交叉事件测试,兼容性测试,性能测试,安装/升级/卸载 ,UI测试 命令操作: adb connect 名 adb devices adb  instal ...

  10. app测试自动化操作方法之三

    首先导包: from appium.webdriver.common.touch_action import TouchAction #(导包指针定位滑动手势密码那个) #设置手势密码(前提是在设备上 ...