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. 纯CSS3实现兔斯基简单害羞表情

    前言 很不巧前天突然就感冒了,都怪自己吃太多饼干导致上火了.整个人都无精打采.本来想多做几个兔斯基表情的,但身体发热很难受.所以就只完成一个简单点的表情耍一耍. 正文 先看一下这个简单到不能再简单的小 ...

  2. poj 1050 To the Max

    To the Max Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 45906   Accepted: 24276 Desc ...

  3. 微软职位内部推荐-Software Development Engineering II

    微软近期Open的职位: Job Title: Software Development Engineering II Work Location: Suzhou, China Enterprise ...

  4. OAF 使用 javascript 使某个按钮在5秒内不能重复点击

    首先要保证按钮是BUTTON,并且按钮事件设置firePartialAction. public class CuxXXXXPGCO extends OAControllerImpl { public ...

  5. CSS 实现加载动画之五-光盘旋转

    今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...

  6. Android Eclipse真机调试 过滤器filter没有显示

    问题: 用真机连上电脑做安卓调试是,工程对应的过滤器会不定期的显示或者不显示.wo the fuck. 解决办法: 为这个工程手动建一个filter

  7. 【NDK开发】使用NDK开发android

    今天学习了一下android NDK,所以记录下来.据说NDK从r7开始自带编译器,在windows上无需配置cygwin的环境.现在我使用NDK r10来开发. 上午搭建的NDK并写了一个实例,不过 ...

  8. jquery扩展函数详解（我的人生颠覆）

    作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 上次分析了jquery的源码 ...

  9. 获取Web.config配置节

    static string GetAppSetting(string key) { var appSetting = ConfigurationManager.AppSettings[key]; if ...

  10. nth-child() 选择器

    给tabel tb1 td添加样式 #tb1 tr td:nth-child(2n+1) {/*奇数行样式*/ } #tb1 tr td:nth-child(2n) {/*偶数行样式*/ }