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

<!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提取文件中的方法名称

    #提取文件中的方法名称 # -*- coding:utf-8 -*- def Query_Method(filepath): file = open(filepath,'r',encoding= 'U ...

  2. 微信录音文件上传到服务器以及amr转化成MP3格式，linux上转换简单方法

    微信公众号音频接口开发 根据业务需求,我们可能需要将微信录音保存到服务器,而通过微信上传语音接口上传到微信服务器的语音文件的有效期只有3天,所以需要将文件下载到我们自己的服务器. 上传语音接口 wx. ...

  3. 全局安装的 webpack运行时 报错 Error: Cannot find module 'webpack' ......

    全局安装的webpack   安装指令如下 cnpm install wepack -save-dev -g 但是 在我的项目空间运行webpack指令的时候 会报如下错误 为了方便抓取{ Error ...

  4. 数据结构c++实现代码-链表

    /*节点Node的相关声明与定义*/ //Node.h #include<iostream> using namespace std; template<typename T> ...

  5. C#通讯录——Windows Form Contact List

    C#通讯录 Windows Form Contact List 主窗口 using System; using System.Collections.Generic; using System.Com ...

  6. 使用python解决算法和数据结构--使用栈实现进制转换

    可以将10进制数据转换成2进制,8进制,16进制等. 晚上练练算法和数据结构哈. # coding = utf-8 class Stack: def __init__(self): self.item ...

  7. IT设备服务监控的方法论

    有方法论提导,在技战术方面才不会偏离目录. 使用服务级别作为关键语,召示着承诺和责任. https://www.circonus.com/2018/06/comprehensive-container ...

  8. springboot logback 相关使用

    参考: https://www.cnblogs.com/EasonJim/p/9159195.html https://blog.csdn.net/tianyaleixiaowu/article/de ...

  9. Visual stuio2015 升级 Update 3+安装.Net Core 安装包之后，无法创建Mvc项目

    原因: 怀疑是更新后缺少Web Frameworks and Tools 工具, 安装update3的时候提示异常 解决方法: 1.去微软 下载 Web Frameworks and Tools安装后 ...

  10. js 2017

    JS面向对象 <script> function num(val) { return val * 8 } function Index(name, age) { this.name = n ...