---恢复内容开始---

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点击回到页面顶部</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.scroll_top{width:60px;height: 60px;border: 1px solid red;position: fixed;bottom: 50px;right: 20px;display: none;}
.scroll_top span{width: 60px;height:60px ;display: block;background: url(img/icon_top.png) no-repeat center #20B2AA;border-radius:30px ;}
</style>
 
</head>
<body>
<pre>
<img src="img/qq.png" />
</pre>
<div class="scroll_top">
<span id="s_btn"></span>
</div>
   
   <script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript">
$("#s_btn").click(function(){
$("html,body").animate({
scrollTop:0
},100);
});
 
$(window).scroll(function(){
if ($(this).scrollTop() >= 300) {
$(".scroll_top").fadeIn(300);
} else{
$(".scroll_top").stop(true,true).fadeOut(100);
}
});
 
</script>
</body>
</html>
 

---恢复内容结束---

js点击回到顶部的更多相关文章

  1. js点击回到顶部2

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>点 ...

  2. 点击回到顶部（jQuery）

    写这个点击回到顶部.我采用的是最简单的jQuery,的点击事件  和animate特效. html部分 <div class="pulltop"> <img sr ...

  3. jquery点击回到顶部

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

  4. js悬浮、回到顶部

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

  5. js效果之回到顶部

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. js中点击返回顶部

    window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }

  7. js+css实现点击回到顶部的效果（最低兼容至ie7）

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 【原生js实现一键回到顶部】

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. JS实现页面回到顶部效果

    [代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. Chrome开发者控制台操作教程

    1清空控制台 在控制台下有个clear console的按钮,点击的时候会清空控制台. 清空控制台  2让Chrome中的页面可编辑 有的时候我们需要临时改变页面上的文字,图案等信息,一种常见的方法是 ...

  2. Mac OS X10.8.3-bash基本命令失效后的修复

    -bash基本命令都失败了. 比如: -bash: ls :command not found   顿时心都凉了. 想要找到.bash_profile文件也不是那么容易的.     step1. 在t ...

  3. SqlServer 分页存储过程

    SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE PROCEDURE [dbo].[usp_CommonDataResourcePaged ...

  4. 全球免费公共 DNS 解析服务器 IP 地址列表推荐 (解决无法上网/加速/防劫持)

    除了宽带提供商的 DNS 以外,像阿里云.腾讯云.Google.百度.IBM.CNNIC 等一些有足够实力的大型互联网公司也非常慷慨地为公众提供了免费的 DNS 解析服务器.异次元这就搜集了全球范围内 ...

  5. [转] 谈谈JS中的函数节流

    函数节流的目的 从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的.例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间.连续尝试进行过多的DOM 相关操作可能会导致浏览 ...

  6. es6 Map，Set 和 WeakMap，WeakSet

    这些是新加的集合类型,提供了更加方便的获取属性值的方法,不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的.同时,在进行属性值添加与获取时有专门的get,set ...

  7. Spring boot国际化

    国际化主要是引入了MessageSource,我们简单看下如何使用,以及其原理. 1.1 设置资源文件 在 properties新建i18n目录 新建message文件: messages.prope ...

  8. GGTalk ——C#开源即时通讯系统

    http://www.cnblogs.com/justnow/ GGTalk ——C#开源即时通讯系统 下载中心   GGTalk(简称GG)是可在广域网部署运行的QQ高仿版,2013.8.7发布GG ...

  9. python3实现二叉树的遍历与递归算法解析

    1.二叉树的三种遍历方式 二叉树有三种遍历方式:先序遍历,中序遍历,后续遍历  即:先中后指的是访问根节点的顺序   eg:先序 根左右   中序 左根右  后序  左右根 遍历总体思路:将树分成最小 ...

  10. Substrings kmp

    Problem Description You are given a number of case-sensitive strings of alphabetic characters, find ...