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

<!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. Axure之全局变量

    ****全局变量*****1.定义:变量是一个数据的容器,是一个字符串,可设置默认值:2.功能:两个功能:读.写3.特点:随时随地可以对变量进行读和写,不限页面.也就是在不同的页面也可以访问同一个全局 ...

  2. Mysql 5.7 密码策略 ERROR 1819 (HY000)

    Mysql 5.7 默认对用户密码有密码强度要求,如果指定弱密码,会提示如下: ERROR (HY000): Your password does not satisfy the current po ...

  3. 80端口被占用 导致apach无法启动问题

    1.查找是哪个程序占用了80端口 netstat -ano 列出所有进程 观察 “本地地址” 列 找到对应的PID 我这里是4 简单的办法,打开任务管理器,查看PID是4的 是哪个进程. 发现是Sys ...

  4. Java接口自动化测试之TestNG学习(二)

    在maven项目的pom.xml文件中导入TestNG <?xml version="1.0" encoding="UTF-8"?> <pro ...

  5. office之Excel 你会用 Ctrl + E 吗？

    从Excel97至现在的最新版本2016,如果评选Excel中最简单.易用.功能最强大的技巧,非2013版新增的“快速填充”(快捷键 Ctrl+E)莫属.向下拖动复制后,打开下拉菜单,就可以看到它的身 ...

  6. ubuntu下使用matplotlib绘图无法显示中文label

    原因是字体导致的.大家的做法基本都是搞一个windows上的字体文件(simhei.ttf, 点我fq下载)然后刷新一下缓存文件. 只不过百度搜到第一篇CSDN的博客,写的很不靠谱(不是所有的CSDN ...

  7. epoll（二）

    epoll概念 epoll对文件描述符的操作方式有两种工作模式:LT模式(Level Trigger,水平触发) 和ET模式(Edge Trigger,边缘触发). LT模式:当epoll_wait检 ...

  8. Tomcat使用https

    # 用JDK自带的Keytool生成keystore文件keytool -genkey -alias tomcat -keyalg RSA -keypass Envisi0n -storepass E ...

  9. k8s中的api server的ca证书，可以和front proxy ca证书一样么？

    答案是: 绝对不可以! 因为请求先验证的是 --requestheader-client-ca-file CA 然后才是--client-ca-file. . 那获取的用户名就会通不过了. 所以会影响 ...

  10. 树递归写法ref实现

    using System; using System.Collections.Generic; using System.Linq; namespace ConsoleAppTest { class ...