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. 获取OpenFileDialog的文件名和文件路径

    得到文件名 string fileName = ofd.SafeFileName; 得到路径 string filePath = System.IO.Path.GetDirectoryName(ofd ...

  2. Android 手机卫士--确认密码对话框编写

    本文接着实现“确认密码”功能,也即是用户以前设置过密码,现在只需要输入确认密码 本文地址:http://www.cnblogs.com/wuyudong/p/5940718.html,转载请注明出处. ...

  3. ObjectAnimator属性动画应用demo

    感谢慕课网--eclipse_xu 布局文件:activity_main.xml <FrameLayout xmlns:android="http://schemas.android. ...

  4. LinkedList 浅析示例

    package com.smbea.demo; import java.util.Iterator; import java.util.LinkedList; import java.util.Lis ...

  5. fillStyle图片填充

    图片自找 <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas ...

  6. Invoke--转载

    在多线程编程中,我们经常要在工作线程中去更新界面显示,而在多线程中直接调用界面控件的方法是错误的做法,Invoke 和 BeginInvoke 就是为了解决这个问题而出现的,使你在多线程中安全的更新界 ...

  7. ORACLE关闭启动的诡异错误

    在自己虚拟机搭建的ORACLE数据库环境下,折腾捣鼓做实验时,不知道什么特殊的改动.操作导致从SQL*PLUS里启动数据库实例时,报如下错误: 然后用startup nomout启动时,任然报ORA- ...

  8. 带你一步步的了解“C#事件”机制

    是什么 本文讨论类型中定义的最后一种成员:事件 定义了时间成员的类型允许类型通知其他对象发生了特定的事情. 具体的说,定义了时间成员的类型能提供以下功能: 方法能登记它对事件的关注 方法能注销它对事件 ...

  9. 【转】70个经典的 Shell 脚本面试问题

    我们为你的面试准备选择了 70 个你可能遇到的 shell 脚面问题及解答.了解脚本或至少知道基础知识对系统管理员来说至关重要,它也有助于你在工作环境中自动完成很多任务.在过去的几年里,我们注意到所有 ...

  10. 在虚拟机中安装红旗桌面7.0 Linux操作系统的详细图文教程

    本文作者:souvc 本文出处:http://www.cnblogs.com/liuhongfeng/p/5343087.html 以下是详细的内容: 一.安装虚拟机. 安装虚拟机可以参考:在Wind ...