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 滚动到顶部的更多相关文章

  1. [HTML/JS] JQuery 页面滚动回到顶部

    HTML: <html> <body> <div id="back-to-top" style="cursor:pointer; displ ...

  2. jacascript 滚动 scroll 与回到顶部

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 滚动 scroll scrollHeight 表示元素的总高度,包括由于溢出而无法展示在网页的不可见部分: ...

  3. 基于jQuery实现页面滚动时顶部导航显示隐藏效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  4. Jquery DIV滚动至浏览器顶部位置固定

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { v ...

  5. [jquery]判断页面滚动到顶部和底部(适用于手机web加载)

    //判断页面滚动到顶部和底部 $(window).scroll(function(){ var doc_height = $(document).height(); var scroll_top = ...

  6. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. UITableView Scroll to top 手动设置tableview 滚动到 顶部

    UITableView Scroll to top 手动设置tableview 滚动到 顶部 [mainTableView scrollRectToVisible:CGRectMake(0,0,1,1 ...

  8. jQuery火箭图标返回顶部代码

    在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  9. scrollTop如何实现click后页面过渡滚动到顶部

    用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...

随机推荐

  1. Oracle报错,ORA-28001: 口令已经失效[转]

    Oracle11G创建用户时缺省密码过期限制是180天(即6个月), 如果超过180天用户密码未做修改则该用户无法登录. Oracle公司是为了数据库的安全性默认在11G中引入了这个默认功能,但是这个 ...

  2. IOS开发基础知识--碎片34

    1:第三方插件SKSTableView在IOS7.1.1出现闪退的问题 解决办法,修改其内部源代码: (NSInteger)subRow { id indexpath = [NSIndexPath c ...

  3. RMAN命令LIST操作总结

    在使用RMAN备份.还原的过程中,我们经常需要查看备份的一些详细信息,例如,RMAN提供了LIST命令.关于LIST命令的详细信息 可以参考Oracle Database Backup and Rec ...

  4. InstallShield如何做Excel安装与否的检测

    传统的方法 一般都会从注册表入手,检测注册表中是否存在某项来判断是否安装了Office,还可以通过注册表信息来判断安装的具体版本. 存在的问题 由于系统的不同.注册表的损坏.安装包的不同等等原因,读取 ...

  5. URL无法显示某些特殊符号

    URL无法显示某些特殊符号,这个时候就要使用编码了.编码的格式为:一个百分号,后面跟对应字符的ASCII(16进制)码值.例如 空格的编码值是"%20".(ASCII参考)URL中 ...

  6. W3School-CSS 定位 (Positioning) 实例

    CSS 定位 (Positioning) 实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 ...

  7. mapreduce导出MSSQL的数据到HDFS

    今天想通过一些数据,来测试一下我的<基于信息熵的无字典分词算法>这篇文章的正确性.就写了一下MapReduce程序从MSSQL SERVER2008数据库里取数据分析.程序发布到hadoo ...

  8. Redis 使用说明 安装配置 主从复制

        开机加自启动: echo "redis-server /etc/redis.conf" >>/etc/rc.local    以前有想过用 Memcache 实 ...

  9. 关于android的日志输出&LogCat

    android提供了自己的log输出api-->位于android.util.Log这个类中. 这个类比较常用的打印日志的方法有5个,这5个方法都会把日志打印到LogCat中: Log.v(ta ...

  10. 设置DIV可编辑

    <div id="move" contentEditable="true">可编辑</div> 设置contentEditable属性可 ...