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

<!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. MAC 调用GCC 提示xcrun: error: invalid active developer path

    xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: ...

  2. python--使用递归的方式建立二叉树

    树和图的数据结构,就很有意思啦. # coding = utf-8 class BinaryTree: def __init__(self, root_obj): self.key = root_ob ...

  3. 来一个使用sysbench测试cpu性能的简单脚本

    #!/bin/bash for ((i=1; i<16; i++)); do sysbench cpu run --cpu-max-prime=10000 --threads=4 --time= ...

  4. cuda by example【读书笔记1】

    cuda 1. 以前用OpenGL和DirectX API简介操作GPU,必须了解图形学的知识,直接操作GPU要考虑并发,原子操作等等,cuda架构为此专门设计.满足浮点运算,用裁剪后的指令集执行通用 ...

  5. stl测试

    以下测试都在学校电脑进行 我觉得应该比考试机器慢一点.. 1.map map的速度测出来和放入数值大小有很大关系 比如 #include <bits/stdc++.h> using nam ...

  6. 跨域资源共享 CORS 详解(转自阮一峰博客)

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...

  7. MySql中Week()函数的用法

    WEEK(date[,mode]):该函数返回日期的星期数 模式 星期的第一天 范围 星期 1 是第一天 0 Sunday 0-53 一年中多一个星期天 1 Monday 0-53 一年多3天 2 S ...

  8. 企业级代码托管Gitlab

    Gitlab概述: 一个利用Ruby on Rails开发的开元应用程序,从而实现一个代码托管项目仓库,可以通过web界面进行访问公开的或者私有的项目 Ruby on Rails是一个可以使开发,部署 ...

  9. JavaSE| 网络编程

    URL URI(Uniform resource identifier):表示一个统一资源标识符 (URI) 引用,用来唯一的标识一个资源. URL(Uniform Resource Locator) ...

  10. scrapy选择器归纳

    python 爬虫: srcrapy框架xpath和css选择器语法 Xpath基本语法 一.常用的路径表达式: 表达式 描述 实例 nodename 选取nodename节点的所有子节点 //div ...