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. 24Spring_事务管理机制

    第一部分:Spring事务管理高层抽象接口 我们介绍三个接口:1.PlatformTransactionManager 2.TransactionDefinition  3.TransactionSt ...

  2. 14Spring_AOP编程(AspectJ)_环绕通知

    在目标方法执行前后,进行代码增强 (阻止目标方法的执行 ) 环绕通知实现任何通知效果. 案例如下: 案例结构:

  3. windows phone 8.0 app 移植到windows10 app 页面类

    phone:PhoneApplicationPage    全部替换为Page phone:WebBrowser               全部替换为   WebView IsScriptEnabl ...

  4. MySQL数据备份小结

    一 MySQL备份恢复总结: 1,备份所有库 2,分库备份 3,备份某库中的某表 4,备份某库中的多个表 5,分表备份 6,只备份表结构 7,只备份数据 二 MySQL备份恢复参数总结: -A 备份所 ...

  5. git流程及操作

    一.git认识 git是什么?Git是目前世界上最先进的分布式版本控制系统 二.git安装 三.git创建本地库 1.首先选择e盘新建一个文件夹如douban 2.点击鼠标右键,执行Git Bash ...

  6. 将Log4net的配置配置到的独立文件中

    本文转载:http://blog.csdn.net/wanzhuan2010/article/details/7587780 另外一篇博客:http://grim1980.blog.sohu.com/ ...

  7. windows下怎么打开psql命令

    你是直接执行的psql.exe吧? 那么需要加入数据库位置等一些参数的.Windows系统下,PostgreSQL有提供一个命令行脚本runsql.bat, 在安装目录的scripts文件夹中,一般是 ...

  8. 信息安全系统设计基础exp_3

    详情请看搭档20135322郑伟博客,传送门如下:http://www.cnblogs.com/zhengwei0712/p/4996017.html

  9. app整体搭建环境：tabBar切换不同控制器的封装（自定义导航+自定义uiviewcontroler+系统自带tabbar+自定义tabbarController）

    首先,一个app的搭建环境非常重要.既要实现基本功能,又要考虑后期优化的性能. 现在很多应用不仅仅是系统自带的控制器,由于需求复杂,基本上需要自定义多控制器来管理. 新建一个BasicNavigati ...

  10. Openwrt 初探

    最近想研究一下Openwrt,于是开始搭建openwrt环境,虽然现在没有现成的板子,但是 可以先编译起来. openwrt的特点是基于下载 -> patch -> 编译 的一个工作模式, ...