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. 关于web软件信息安全问题防护资料的整理 (一)

    之前意识到了安全问题的重要性,于是就在网上找了一下安全问题的解决办法(主要是web应用以及政府网站方面的),问了一下同学的公司是怎么保证安全的,跟我说用的是shiro安全机制这个貌似好多公司都在用,网 ...

  2. iOS Swift-元组tuples(The Swift Programming Language)

    iOS Swift-元组tuples(The Swift Programming Language) 什么是元组? 元组(tuples)是把多个值组合成一个复合值,元组内的值可以使任意类型,并不要求是 ...

  3. .Net中使用SendGrid Web Api发送邮件(附源码)

    SendGrid是一个第三方的解决邮件发送服务的提供商,在国外使用的比较普遍.国内类似的服务是SendCloud.SendGrid提供的发送邮件方式主要是两种, 一种是SMTP API, 一种是Web ...

  4. Microsoft IoT Starter Kit 开发初体验

    1. 引子 今年6月底,在上海举办的中国国际物联网大会上,微软中国面向中国物联网社区推出了Microsoft IoT Starter Kit ,并且免费开放1000套的申请.申请地址为:http:// ...

  5. ORA-00824: cannot set sga_target due to existing internal settings, see alert log for more information

    这篇文章是上篇文章”Expdp 导数错误 ORA-00832”的延续,前几天工作比较忙.累,直到今天才整理发出来.这个数据库实例的参数设置比较诡异其实是有原因的,由于这台数据库服务器系统是32位,数据 ...

  6. SQL Server 中VARCHAR(MAX)变量赋值引起的性能问题。

    案例环境: 操作系统版本 : Windows Server 2008 R2 Standard  SP1 数据库版本   :  Microsoft SQL Server 2012 (SP1) - 11. ...

  7. 从零自学Hadoop(12):Hadoop命令中

    阅读目录 序 HDFS Commands User Commands Administration Commands Debug Commands 引用 系列索引 本文版权归mephisto和博客园共 ...

  8. 自动创建WIN32下多级子目录的C++封装类

            这是 WIN32 自动创建多级子目录的 C++ 封装类,用法简单.         封装没有采用类的静态函数方式,而是在构造函数里面直接完成工作.没什么具体的原因,只是当时做成这样了, ...

  9. WPF 无边框透明按钮

    在实际开发过程中,有时候要设置一个无边框的按钮,或者无边框的透明按钮. 按钮效果如下: 1.当你应用telerik组件中的Button时,这个直接就可以设置 telerik:StyleManager. ...

  10. JavaScript 动态插入 CSS

    写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便.JS 动态插入 CSS 两个步骤就可以 创建一个 style 对象 使用 stylesheet 的 inser ...