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

<!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. tomcat启动报错 关键字：java.lang.NoClassDefFoundError和 java.lang.ClassNotFoundExceeption

    启动tomcat时报错情况如下图所示:实际上就是依赖的bean出错,百度上很多方法都说是tomcat没有部署正确,项目-->右键----->proterties----->Targe ...

  2. linux ssh远程免密码登入

    首先登入一台linux服务器,此台做为母机(即登入其他linux系统用这台做为入口):执行一行命令生成key文件:ssh-keygen -t rsa 2 在母机上,进入/roo/.ssh目录,找到id ...

  3. javac选项以递归方式编译给定目录下的所有Java文件 - IT屋-程序员软件开发技术分享社区

    http://www.it1352.com/539276.html #Linux $ find -name“* .java”> sources.txt $ javac @ sources.txt ...

  4. 435. Non-overlapping Intervals

    Given a collection of intervals, find the minimum number of intervals you need to remove to make the ...

  5. JDK1.8 JVM参数配置

    JAVA_OPTS=" -server #服务器模式 -Xmx4g #JVM最大允许分配的堆内存,按需分配 -Xms4g #JVM初始分配的堆内存,一般和Xmx配置成一样以避免每次gc后JV ...

  6. BZOJ 1706

    题解: 倍增+floyd 首先这题比较容易想到是把每个点拆点做dij 但是这样复杂度是knlogn的 这道题的k较大,所以不行 我们考虑到每走一步,其实就是在进行一次floyd 而这个可以看成矩阵乘法 ...

  7. Apache ActiveMQ 远程代码执行漏洞 (CVE-2016-3088)案例分析

    部署ActiveMQ运行环境 在linux上部署apache-activemq-5.10.0-bin.tar.gz 通过tar -zxvf  apache-activemq-5.10.0-bin.ta ...

  8. Springboot+websocket+定时器实现消息推送

    由于最近有个需求,产品即将到期(不同时间段到期)时给后台用户按角色推送,功能完成之后在此做个小结 1. 在启动类中添加注解@EnableScheduling package com.hsfw.back ...

  9. tomcat-会话绑定

    会话保存 1) session  sticky source_ip                         原地址绑定 nginx: ip_hash haproxy: source lvs: ...

  10. Python学习（十三） —— 网络编程

    一.操作系统基础 操作系统(Operating System):OS是管理和控制计算机硬件和软件资源的计算机程序,是直接运行在“裸机”上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才能运行 ...