【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 ...
随机推荐
- VS2010中整理代码快捷键
快捷键:Ctrl+A Ctrl+K Ctrl+F的三个的组合2015-11-08
- 机顶盒上gridview+ScrollView的使用。
最近在机顶盒上做一个gridview, 其焦点需要在item的子控件上,但gridview的焦点默认在item上,通过 android:descendantFocusability="aft ...
- IOS客户端实现RSA加密
在IOS的app登陆模块,用户名和密码如果直接传给后台服务器,很容易被截获并伪造网络请求, 如果利用RSA算法在每个客户端利用公钥解密,服务器端进行私钥解密,即使截获了密码也是无法解密的 在这里只介绍 ...
- IOS开发基础知识--碎片37
1:iOS 使用NJKWebViewProgress做webview进度条 引入头文件: #import "NJKWebViewProgressView.h" #import &q ...
- Android 窗体设置
requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG ...
- Mac版PhpStorm之XAMPP整合apache服务器配置
版权声明:本文为博主原创文章,未经博主允许不得转载. 选择在PhpStorm集成apache服务器,下面是我自己的亲测的步骤. 1.如何修改apache默认端口 xampp apache默认的http ...
- iOS开发之功能模块--推送之坑问题解决
不管想不想看我后面再开发中总结的经验,但是很值得推荐一位大神写的关于苹果推送,很多内容哦:http://www.cnblogs.com/qiqibo/category/408304.html 苹果开发 ...
- Redis 键(key)相关的命令及其它命令的查看地址
Redis 键(key) Redis 键命令用于管理 redis 的键. 语法 Redis 键命令的基本语法如下: redis 127.0.0.1:6379> COMMAND KEY_NAME ...
- Linux下安装tar.gz类型的jdk,并配置环境变量
近期因要学习一门技术,必须在Linux下运行,故开始学习如何使用Linux. 在安装jdk时出现了困难,环境变量配置不成功,花了一天时间才搞定,特分享出来,供大家参考. Linux下安装jdk,步骤如 ...
- SSIS 2010 BUG 一例
Sample data :abc|"edfg|xyz Test 1: Text Qualified is set to nothing. the result is in good for ...