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

<!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. python 内置数据类型之数字

    目录: 1.2. 数字 1.2.1. 数字类型 1.2.2. 浮点数 1.2.3. 进制记数 1.2.4. 设置小数精度 1.2.5. 分数 1.2.6. 除法 1.2 数字   1.2.1 数字类型 ...

  2. Oracle unusable index 与unvisible index

    1 可见性 索引的可见性(visibility)指的是该索引是否对CBO优化器可见,即CBO优化器在生成执行计划的时候是否考虑该索引,可以看作是索引的一个属性.如果一个索引可见性属性为:invisib ...

  3. 2017-2018-2 20165206 实验二《Java面向对象程序设计》实验报告

    2017-2018-2 20165206 实验二<Java面向对象程序设计>实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:韩啸 学号:20165206 指导教 ...

  4. Tomcat延迟启动

    import subprocess as t import time, os, requests, sys WEB_IP = '127.0.0.1:8080' # WEB_IP = '127.0.0. ...

  5. How to trigger an Animation when TextBlock’s Text is changed during a DataBinding

    原文:http://michaelscherf.wordpress.com/2009/02/23/how-to-trigger-an-animation-when-textblocks-text-is ...

  6. 封装curl的get和post请求

    /** * GET 请求 * @param string $url */ function http_get($url){ $oCurl = curl_init(); if(stripos($url, ...

  7. 数学建模：2.监督学习--分类分析- KNN最邻近分类算法

    1.分类分析 分类(Classification)指的是从数据中选出已经分好类的训练集,在该训练集上运用数据挖掘分类的技术,建立分类模型,对于没有分类的数据进行分类的分析方法. 分类问题的应用场景:分 ...

  8. TensorFlow图像预处理-函数

    更多的基本的API请参看TensorFlow中文社区:http://www.tensorfly.cn/tfdoc/api_docs/python/array_ops.html 下面是实验的代码,可以参 ...

  9. Python Enum 枚举 用法汇总

    Python Enum 枚举 用法汇总 import os import sys if sys.version_info.major + sys.version_info.minor * 0.1 &l ...

  10. 利用Python中的mock库对Python代码进行模拟测试

    这篇文章主要介绍了利用Python中的mock库对Python代码进行模拟测试,mock库自从Python3.3依赖成为了Python的内置库,本文也等于介绍了该库的用法,需要的朋友可以参考下     ...