用Jquery写返回顶部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jquery动态回到顶部特效</title>
</head>
<body>
<style>
.up {position: fixed;bottom:35px;right:35px;cursor:pointer;display:none;}
</style>
<p>Just do what you want do!!!</p>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="up">↑</div>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var fh=$('.up');
$(document).scroll(function() {
var gdt=$(window).scrollTop();
if(gdt>=200){
fh.css('display','block')
}else{
fh.css('display','none')
}
});
fh.click(function(){
var c=$(window).scrollTop();
if(c>0){
timg=setInterval(function(){
$(window).scrollTop(c);
if(c>0){
c-=10
}else{
clearInterval(timg)
}
},0.5)
}
});
</script>
</body>
</html>
用Jquery写返回顶部代码的更多相关文章
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- qq空间返回顶部代码
点击这里体验效果 以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 简单的JQuery top返回顶部
一个最简单的JQuery Top返回的代码,Mark一下: HTML如下: <div id="backtop"> <a href="javascript ...
- js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- JQuery 实现返回顶部效果
首先要里了解一下几个知识 $(window).scrollTop() ---滚动条距顶部距离 fadeIn() 方法使用淡入效果来显示被选元素,假如该元素是隐藏的. fadeOut() 方法使用淡出效 ...
- javascript+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
- jQuery返回顶部代码
页面较长时,使用返回顶部按钮比较方便,在电商中必备操作.下面自己制作一个js文件,totop.js,把它直接引用到需要的网页中即可. $(function () { $("body" ...
- JavaScript/Jquery返回顶部代码
<!DOCTYPE html> <html> <head> <title>返回顶部</title> <meta charset=&qu ...
- jQuery实现返回顶部
由于项目需要,写了个返回顶部的小功能... /*返回顶部*/ function toTop() { $(".to_top").hide(); $(window).scroll(fu ...
随机推荐
- SPOE网络供电
本文摘自:https://wenku.baidu.com/view/929bd42daa00b52acec7ca3a.html 随着网络技术与应用的快速发展,网络前端设备的种类越来越多.架设越来越广泛 ...
- 2019秋第一次Java学习总结
本周Java学习总结: 知识点总结: 1.Java中程序的执行步骤 使用Javac将一个.Java源文件编译成.class文件 使用Java可以执行一个*.class文件 2.&&与& ...
- [已解决]报错run `npm audit fix` to fix them, or `npm audit` for details
问题: added 246 packages from 681 contributors and audited 382 packages in 17.509s found 13 vulnerabil ...
- 树上倍增 hdu 2586
参考博客: 代码: #include<stdio.h> #include<iostream> #include<algorithm> #include<mat ...
- Excel的线程 与 SynchronizationContext的实现
COM组件的线程模型与Excel多线程的背景知识 COM组件的线程模型被称之为Apartment模型,COM对象初始化时其执行上下文(Execution Context),他要么和单个线程关联STA( ...
- yppasswd, ypchfn, ypchsh - 修改你在NIS数据库中的密码
SYNOPSIS(总览) yppasswd [-f] [-l] [-p] [user] ypchfn [user] ypchsh [user] DESCRIPTION(描述) 在Linux中,标准的 ...
- who - 显示已经登录的用户
总览 (SYNOPSIS) who [OPTION]... [ FILE | ARG1 ARG2 ] 描述 (DESCRIPTION) -H, --heading 显示 栏目行 -i, -u, --i ...
- Java 二叉树遍历相关操作
BST二叉搜索树节点定义: /** * BST树的节点类型 * @param <T> */ class BSTNode<T extends Comparable<T>&g ...
- 判断语句 (a>b)?a:b【转载】
文章转载自https://blog.csdn.net/hyj1996818/article/details/81783513 今天刷题有看到一种我没学过的判断语句 感觉很高级的样子 我跟大家分享下我的 ...
- Core Text 入门
本文所涉及的代码你可以在这里下载到 https://github.com/kejinlu/CTTest,包含两个项目,一个Mac的NSTextView的测试项目,一个iOS的Core Text的测试项 ...