jQuery返回顶部（精简版）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery返回顶部</title>
<style>
*body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的，防抖动 */}
*body #toTop{ position: absolute; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-10)); /* 底部固定悬浮 */}
#toTop{ display: none; position: fixed; border: 1px solid red; right: 10px; bottom: 10px; padding: 10px 0; cursor: pointer;}
</style>
</head>
<body style="height:3000px;">
<div id="toTop"> scroll to top</div>

<script src="http://www.qixoo.qixoo.com/libs/jquery/1.9.1/jquery.js"></script>
<script>
$(function(){
var toTop = $(‘#toTop‘);

// 当窗口滚动条滚动时触发
$(window).scroll(function(){
var st = $(window).scrollTop(); //获取浏览器窗口向上滚动的距离

// 选项卡标签栏/控制台调试代码
// document.title = $(window).scrollTop();
// console.log($(window).scrollTop());

// 判断向上滚动距离是否大于500
if(st<500){
toTop.fadeOut(‘fast‘);
}else{
toTop.fadeIn(‘fast‘);
}
});
// 当点击按钮时触发
toTop.click(function(){
$(‘html ,body‘).animate({
scrollTop: 0
},300);
return false;
});
});
</script>
</body>
</html>

jQuery返回顶部（精简版）的更多相关文章

  1. jquery返回顶部，支持手机

    jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...

  2. jQuery返回顶部实用插件YesTop

    只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...

  3. jquery返回顶部和底部插件和解决ie6下fixed插件

    (function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...

  4. Jquery返回顶部插件

    自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...

  5. jquery 返回顶部 兼容web移动

    返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...

  6. jquery返回顶部特效

    <style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...

  7. jquery返回顶部

    // 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...

  8. Jquery 返回顶部

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

  9. jQuery返回顶部代码

    页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...

随机推荐

  1. .Net 项目代码风格要求小结

    代码风格没有正确与否,重要的是整齐划一,这是我拟的一份<.Net 项目代码风格要求>,供大家参考. 1. C# 代码风格要求1.1注释 类型.属性.事件.方法.方法参数,根据需要添加注释. ...

  2. 总结Gerrit常用命令

    查看分支列表,带有*的分支表示是当前所在分支[root@115~~]#git branch 查看分支详细情况 (推荐这种方式)[root@115~~]#git branch -av 创建分支(比如de ...

  3. pl/sql developer中的SQL语句

    1.无论是在查询还是在插入的时候,值都必须是单引号‘’,否则会报错,ORA-00904:标识符无效.

  4. AFN框架基本使用

    0.AFN框架基本使用 0.1 AFN内部结构 AFN结构体 - NSURLConnection + AFURLConnectionOperation(已经被废弃) + AFHTTPRequestOp ...

  5. 错题802-java

    1.list是一个ArrayList的对象,哪个选项的代码填到//todo delete处,可以在Iterator遍历的过程中正确并安全的删除一个list中保存的对象?() Iterator it = ...

  6. 【Asp.Net】document.getElementById 的属性介绍

    document.getElementById("id").style.xxx可以设置指定ID的控件的属性值. 主要支持以下一些属性设置: 盒子标签和属性对照 CSS语法(不区分大 ...

  7. android.hardware.Camera类及其标准接口介绍

    android.hardware.Camera类及其标准接口介绍,API level 19 http://developer.android.com/reference/android/hardwar ...

  8. caffe windows 学习第一步：编译和安装（vs2012+win 64)

    没有GPU,没有linux, 只好装caffe的windows版本了. 我的系统是win10(64位),vs 2012版本,其它什么都没有装,因此会需要一切的依赖库. 其实操作系统只要是64位就行了, ...

  9. 【java基础】IOC介绍及其简单实现

    控制反转(Inversion of Control,英文缩写为IoC)是一个重要的面向对象编程的法则来削减计算机程序的耦合问题,也是轻量级的Spring框架的核心. 控制反转一般分为两种类型,依赖注入 ...

  10. 用SugarORM快速开发需要同步和保存大量数据的Android互联网客户端

    最近开发的一个项目主要有两个特点,这两点也是在项目开发前需要着重去规划解决方案的: 需要和Rest服务端请求大量的数据 同时这些数据本地也要保存到sqlite数据库 对于第一点,目前的Volley.G ...