【jQuery】scroll 滚动到顶部
Jquery 实现页面滚动到顶端
$(document).ready(function () {
// 滚动窗口来判断按钮显示或隐藏
$(window).scroll(function () {
//根据滚动条距顶部位置,显示还是隐藏top按钮
if ($(this).scrollTop() > 150) {
$('.back-to-top').fadeIn(100);
} else {
$('.back-to-top').fadeOut(100);
}
}); // jQuery实现动画滚动按钮事件
$('.back-to-top').click(function (event) {
event.preventDefault();
$('html, body').animate({ scrollTop: 0 }, 500);
})
});
注意:.back-to-top 的position:fixed;之后就可以了。
【jQuery】scroll 滚动到顶部的更多相关文章
- [HTML/JS] JQuery 页面滚动回到顶部
HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...
- jacascript 滚动 scroll 与回到顶部
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: ...
- 基于jQuery实现页面滚动时顶部导航显示隐藏效果
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...
- Jquery DIV滚动至浏览器顶部位置固定
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { v ...
- [jquery]判断页面滚动到顶部和底部(适用于手机web加载)
//判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- UITableView Scroll to top 手动设置tableview 滚动到 顶部
UITableView Scroll to top 手动设置tableview 滚动到 顶部 [mainTableView scrollRectToVisible:CGRectMake(0,0,1,1 ...
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- scrollTop如何实现click后页面过渡滚动到顶部
用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...
随机推荐
- Oracle报错,ORA-28001: 口令已经失效[转]
Oracle11G创建用户时缺省密码过期限制是180天(即6个月), 如果超过180天用户密码未做修改则该用户无法登录. Oracle公司是为了数据库的安全性默认在11G中引入了这个默认功能,但是这个 ...
- IOS开发基础知识--碎片34
1:第三方插件SKSTableView在IOS7.1.1出现闪退的问题 解决办法,修改其内部源代码: (NSInteger)subRow { id indexpath = [NSIndexPath c ...
- RMAN命令LIST操作总结
在使用RMAN备份.还原的过程中,我们经常需要查看备份的一些详细信息,例如,RMAN提供了LIST命令.关于LIST命令的详细信息 可以参考Oracle Database Backup and Rec ...
- InstallShield如何做Excel安装与否的检测
传统的方法 一般都会从注册表入手,检测注册表中是否存在某项来判断是否安装了Office,还可以通过注册表信息来判断安装的具体版本. 存在的问题 由于系统的不同.注册表的损坏.安装包的不同等等原因,读取 ...
- URL无法显示某些特殊符号
URL无法显示某些特殊符号,这个时候就要使用编码了.编码的格式为:一个百分号,后面跟对应字符的ASCII(16进制)码值.例如 空格的编码值是"%20".(ASCII参考)URL中 ...
- W3School-CSS 定位 (Positioning) 实例
CSS 定位 (Positioning) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 ...
- mapreduce导出MSSQL的数据到HDFS
今天想通过一些数据,来测试一下我的<基于信息熵的无字典分词算法>这篇文章的正确性.就写了一下MapReduce程序从MSSQL SERVER2008数据库里取数据分析.程序发布到hadoo ...
- Redis 使用说明 安装配置 主从复制
开机加自启动: echo "redis-server /etc/redis.conf" >>/etc/rc.local 以前有想过用 Memcache 实 ...
- 关于android的日志输出&LogCat
android提供了自己的log输出api-->位于android.util.Log这个类中. 这个类比较常用的打印日志的方法有5个,这5个方法都会把日志打印到LogCat中: Log.v(ta ...
- 设置DIV可编辑
<div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可 ...