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

<!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. nodejs 如何获取页面get、post传递过来的参数

    如果是get传递参数,可以直接使用 request.query.name 如果是post 需要借助body-parser 首先引入bodyParser = require('body-parser') ...

  2. 论文阅读笔记二十九：SSD: Single Shot MultiBox Detector(ECCV2016)

    论文源址:https://arxiv.org/abs/1512.02325 tensorflow代码:https://github.com/balancap/SSD-Tensorflow 摘要 SSD ...

  3. 基于nginx的WebSocket反向代理

    系统:windows 版本:nginx 1.4.5 配置内容: location ~ \.do$ {             proxy_pass   http://192.168.20.102:80 ...

  4. IDEA中tomcat的部署

    创建一个项目就要部署tomcat

  5. OpenCV-Python入门教程5-阈值分割

    一.固定阈值分割 import cv2 import matplotlib.pyplot as plt # 灰度图读入 img = cv2.imread('gradient.jpg', 0) # 阈值 ...

  6. win10 64 使用 visual studio 2017 搭建汇编开发环境

    转自http://blog.csdn.net/sinat_27382047/article/details/70339455 插件 vs2015的汇编语法高亮插件(安装就行)这玩意找了我很久= = h ...

  7. CDOJ 1960 构造哈密顿路径

    题意: 给定n个点的有向完全图,希望通过其中n-1条边将n个点串起来(2<=n<=1000) 欧拉路径:经过所有边且只经过一次 哈密顿路径:经过所有点且只经过一次 思路: 本题条件特殊,有 ...

  8. 【译】如何使用Vue捕获网络摄像头视频

    几个月前,我一直关注着比特币的爆发并且在GDAX网站上注册账号.在注册验证的过程中,网站提示要通过计算机的网络摄像头提交我自己的一张照片作为照片ID.这是一个很酷的做法,让我思考一个问题:在网络浏览器 ...

  9. Spring boot国际化

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

  10. pip安装其他包报错

    pip安装时报错  Unknown or unsupported command 'install 一.是否配置了路径 配置了看下面的方法. 二.有多个pip系统不知道调用哪个. 1.where pi ...