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" ...
随机推荐
- html5压缩图片并上传
手机端图片有很大的,上传的时候很慢,这时候就要压缩一下了,有一个开源的js可以压缩图片的大小,开源地址如下:https://github.com/think2011/localResizeIMG3 代 ...
- Netty开发UDP协议
UdpServer package org.zln.netty.five.part07; import io.netty.bootstrap.Bootstrap; import io.netty.ch ...
- Gradle的HelloWorld
Gradle的脚本名为 build.gradle task hello{ doLast{ println("Hello World") } } 运行:gradle -q hell ...
- 05JavaIO详解_仿照IO源码自己去实现一个IO流（为了加深印象，本身没有价值）
版本会越来越难: 版本1:只写一个read方法 package com.guigu.shen.InputStream; import java.io.IOException; import java. ...
- 微软职位内部推荐-Senior Development Engineer
微软近期Open的职位: Job Title: Senior Software Development Engineering Work Location: Suzhou, China Enterpr ...
- C语言错误 BUG报错整理
错误一 关键字:间接寻址级别不同 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> ...
- CAN开发中遇到的奇怪问题
问题背景: 之前在做USBCAN2开发过程中,遇到一个奇葩问题,当我们加上其中某一句代码时,我们的程序会走不下去,得不到数据,而且在调试的过程中,你也不能暂停,不然,你也得不到数据.后来参考网上一篇帖 ...
- 微信公众平台开发之微信access_token如何有效长期保存
随着微信使用越来越广泛,微信公众平台开放了许多接口以提供更多个性化的服务,包括自定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等,开发者在调用这些接口时,都需要传入一个相同的参数ac ...
- SQLServer 语句-创建索引
语法:CREATE [索引类型] INDEX 索引名称ON 表名(列名)WITH FILLFACTOR = 填充因子值0~100GO /*实例*/USE 库名GOIF EXISTS (SELECT * ...
- CSS 实现加载动画之三-钢琴按键
今天做的这个动画实现也是非常简单,简单数几行代码就可以搞定.给这个动画取了个优雅的名字--钢琴按键,也实在是想不出什么更形象的名字了.废话不多说,直接上图. 1. 先看gif图 2. 代码实现思路 2 ...