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

<!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 自动获取手机短信验证码

    需要一个有权限的 APK 在手机实时存储短信到手机内存 /sdcard/smslog.txt 里(外部SD卡也可以知道能通过adb命令访问到): /***** ...... try {long tim ...

  2. docker批量删除none镜像

    1.直接用docker images | grep none | awk ‘{print $3}’ |xgars docker rmi 通过关键字搜索,得到docker id,进行删除

  3. servlet获取多个同名参数

    String[] item = request.getParameterValues("参数名");

  4. Oracle数据库查看表空间是否为自增的

    表空间是有数据文件组成的,所以看表空间是否自增即看数据文件,如下查自增的表空间: select tablespace_name,file_name,autoextensible from dba_da ...

  5. alpha冲刺1/10

    目录 摘要 团队部分 个人部分 摘要 队名:小白吃 组长博客:hjj 作业博客:来自双十一的爱 团队部分 后敬甲(组长) 过去两天完成了哪些任务 文字描述 Alpha版本的任务细分安排 leangoo ...

  6. pyqt5界面使用

    安装配置了pyuic和pyrcc后再进行下面操作 1.打开:       位置(我的):C:\Users\AppData\Roaming\Python\Python35\site-packages\p ...

  7. 存储过程导入excel

    #region 导入订单        protected override string DoExcelData(System.Data.DataTable dt)        {         ...

  8. linux系统虚拟机下安装nginx基础

    虽然安装nginx什么的 .以及如何配置等等一系列的资料案例已经很多了 但是作为菜鸟的我还是搞了半天哈 官网上面也有.但是一些细节方面的并没有说明.导致踩了半天坑才搞好 本案例的系统环境     wi ...

  9. day75 form 组件(对form表单进行输入值校验的一种方式)

    我们的组件是什么呢 select distinct(id,title,price) from book ORM: model.py class Book(): title=model.CharFiel ...

  10. oracle数据库删除数据恢复

    select * from table_name as of timestamp trunc(sysdate)-10; 数字部分可以调整到最近时间内 复制表内容 insert into res_pro ...