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. 原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法

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

  2. 19Spring_AOP编程(AspectJ)_使用@Pointcut注解来定义切点

    我们之前的方式是采用 @AfterReturning(value="execution(* com.guigu.shen.anotion.UserDaoImpl.*(..))",r ...

  3. Windows客户端C/C++编程规范“建议”——风格

    本文来自:http://blog.csdn.net/breaksoftware/article/details/37935459 命名风格也非常适用于C# 9 风格 9.1 优先使用匈牙利命名法 等级 ...

  4. 未能解析此远程名称:'nuget.org' 的解决方法

    今天用Nuget下一个程序包时,发现Nuget挂了: 未能解析此远程名称:'nuget.org' . 浏览器打开  http://nuget.org  失败. 使用cmd命令 输入nslookup n ...

  5. PBR综合小实验视频-狮子XL

    这个是上学时候录的一个策略路由小实验

  6. [C#]動態叫用Web Service

    http://www.dotblogs.com.tw/jimmyyu/archive/2009/04/22/8139.aspx 摘要 Web Service對大家來說想必都不陌生,也大都了解Web S ...

  7. CSS 实现加载动画之六-大风车

    这个动画改编自光盘旋转,前几个步骤一样,最后一步不同.光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角. ...

  8. Win10开发究竟能实现哪些牛逼的功能

    经Win10开发者群(53078485)大咖Aran童鞋授权,这次先Show一下他通过vs2015做的跨端APP一些高级功能的GIF图,大家可以回帖想要哪个功能的DEMO,我和Aran说一下,会把DE ...

  9. 7天学会spring cloud教程

    按照官方的话说:Spring Cloud 为开发者提供了在分布式系统(如配置管理.服务发现.断路器.智能路由.微代理.控制总线.一次性 Token.全局锁.决策竞选.分布式会话和集群状态)操作的开发工 ...

  10. 通过WMI - Win32_Processor - ProcessorId获取到的并不是CPU的序列号，也并不唯一

    现在网上不少教程,教人通过WMI - Win32_Processor - ProcessorId来获取CPU的“序列号”,典型代码如下: public static string GetCPUSeri ...