jQuery返回顶部（精简版）
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返回顶部（精简版）的更多相关文章
- jquery返回顶部，支持手机
jquery返回顶部,支持手机 效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
- jQuery返回顶部实用插件YesTop
只需一句jQuery代码实现返回顶部效果体验:http://hovertree.com/texiao/yestop/ 使用方法:只需引用jQuery库和YesTop插件(jquery.yestop.j ...
- jquery返回顶部和底部插件和解决ie6下fixed插件
(function($){ //返回顶部和底部插件 $.fn.extend({ goTopBootom:function (options){ //默认参数 var defaults = { &quo ...
- Jquery返回顶部插件
自己jquery开发的返回顶部,当时只为了自己用一下,为了方便,修改成了插件... 自己的博客现在用的也是这个插件..使用方便!! <!DOCTYPE html> <html> ...
- jquery 返回顶部 兼容web移动
返回顶部图片 http://hovertree.com/texiao/mobile/6/tophovertree.gif 具体实现代码 <span id="tophovertree&q ...
- jquery返回顶部特效
<style> p#back-to-top{position:fixed; bottom:100px;right:10px; display: none; } p#back-to-top ...
- jquery返回顶部
// 返回顶部 var fixed_totop = $('.back_top').on('click',function(){ $('html, body').animate({scrollTop: ...
- Jquery 返回顶部
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- jQuery返回顶部代码
页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...
随机推荐
- jqXHR 对象（post完成后再调用函数）
场景: function A() { B(); C(); } function B() { $.post(url, {}, function () { alert("我错了!"); ...
- 【Asp.Net】Asp.Net CommandName作用
数据绑定控件的模板中 CommandName 属性以下属性值会触发特定的事件: Cancel(取消) Delete(删除) Select(选择) Edit(编辑) Insert(插入) Update( ...
- 【转】WCF与Web API 区别(应用场景)
Web api 主要功能: 支持基于Http verb (GET, POST, PUT, DELETE)的CRUD (create, retrieve, update, delete)操作 请求的回 ...
- Kinect for Windows SDK开发初体验（一）环境配置
1.开发环境需求 (1).硬件需求 a.需要拥有双核,2.66GHz以上的CPU. b.显卡支持Microsoft DirectX 9.0c; c.2GB的内存 d.Kinect for Window ...
- C# 版本的 计时器类：精确到微秒 秒后保留一位小数 支持年月日时分秒带单位的输出
class TimeCount { // 临时变量,存放当前类能表示的最大年份值 ; /// <summary> /// 获取毫秒能表示的最大年份数 /// </summary> ...
- node-webkit 写桌面系统
[1.使用nodejs] 和很多人一样,百度了很久很久,没看到有恰到点的解释的,当时我已经怀疑到是配置出来的,而非引js,最后确实啥都不用引 实际关键在package.json加入设置"no ...
- Python之socket（套接字）
Socket 一.概述 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. ...
- C# 有关命名法
常用的几种:匈牙利命名法,骆驼命名法,帕斯卡(pascal)命名法就说了. 总结下VS所用的标准命名: 1 ADO.NET 命名规范 数据类型 数据类型简写 标准命名举例 Connection con ...
- Django1.8教程——从零开始搭建一个完整django博客（二）
在上一节中,我们已经创建了一个Django模型Post,并使Post模型与数据库同步.这一节中,我们将介绍Django管理站点,通过Django管理站点来管理我们创建的Post模型实例. 为你的模型创 ...
- 第二章 Js函数
函数的定义二种定义 ①function myfunc () { console("hello"); }; ②var myfunc = function () { console ...