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. VisualVM通过密码JMX远程连接JVM

    如果本地安装了JDK,则在${java.home}/bin/下可找到jvisualvm.exe,双击打开即可使用.否则,去官网下载一个,解压即可使用.现有一个springboot程序springboo ...

  2. DP&图论 DAY 1 下午

    DP&图论  DAY 1  下午  区间和序列上的DP 序列上的DP >序列上的dp状态设计最基本的形式 F[i]表示以 i 结尾的最优值或方案数.◦ F[i][k]表示以 i 结尾附加 ...

  3. 只需体验三分钟,你就会跟我一样,爱上这款Toast

    只需体验三分钟,你就会跟我一样,爱上这款Toast https://www.jianshu.com/p/9b174ee2c571

  4. Python标准组件ConfigParser配置文件解析器,保存配置时支持大写字母的方法

    虽然自己已经改用xml作为配置文件首选格式了,但是有时候还是需要解析ini.cfg文件(为了兼容早期版本或者其他作者的软件). 基本上Python自带的ConfigParser足够应对了,但是美中不足 ...

  5. Weex简介

    使用Weex开发App对于我们纯前端人员来说,是件很爽的事情,只要你熟悉了他的语法,基本可以做到一周上手写app.极其适合交互要求不高,时间紧迫,人手不足的同构开发需求. Weex 提供了多端一致的技 ...

  6. EL表达式与JSTL标签库(二)

    1.JSTL标签库 标签库 作用 URI 前缀 核心 包含Web应用的常见工作,如循环.输入输出等 http://java.sun.com/jsp/jstl/core c 国际化 语言区域.消息.数字 ...

  7. YII :将oracle中timestamp 字段正常显示在页面中

    'value'=>'DateTime::createFromFormat("d#M#y H#i#s*A", $data["START_TIME"])-&g ...

  8. IFC布局特点

    IFC(inline formatting context),行内格式化上下文 特点: 1.内联元素在水平线上一个接一个排列 2.内部元素水平方向上的margin.padding.border有效,垂 ...

  9. ExtJs6.2环境配置

    http://extjs.org.cn/node/831 注意环境变量就是把  创建的项目文件放在C盘中

  10. .NET 实现复制粘贴功能

    老是把自己当作珍珠,就时时有怕被埋没的痛苦.把自己当作泥土吧,让众人把你踩成一条道路. -----<泥土>鲁藜 .NET如何实现复制粘贴功能,具体代码如下: aspx文件: <div ...