<!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点击回到顶部2的更多相关文章

  1. js点击回到顶部

    ---恢复内容开始--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  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 unittest装载、执行、造成报告

    #执行用例 caselist = config.caselist for i in range(0,len(caselist)): reportname = caselist[i][2:] now = ...

  2. 论文阅读笔记三十七：Grid R-CNN（CVPR2018）

    论文源址:https://arxiv.org/abs/1811.12030 开源代码:未公开 摘要 本文提出了目标检测网络Grid R-CNN,其基于网格定位机制实现准确的目标检测.传统方法主要基于回 ...

  3. GnuPGP介绍

    PGP(Pretty Good Privacy的首字母):PGP公司的加密.签名工具套件,使用了商业版本的IDEA算法,并集成了有商业版权的PGPdisk工具. GnuPG(GNU Privacy G ...

  4. .net core支持的操作系统版本

    https://github.com/dotnet/core/blob/master/os-lifecycle-policy.md

  5. Coolpy网络部署说明(宽带互联网)

    本文将介绍Coolpy第二种方案的网络部署方法.以方便大家学习如何让coolpy设备部署到相应的应用场景中.本例将以水星MW310R无线路由器作为演示路由器. 1.硬件连接部分: coolpy设备=& ...

  6. linux查看文件的后几行

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAu4AAABiCAIAAACAksEXAAAZuUlEQVR4nO2dzdmzuq6G0wRV0ARNMM

  7. Python学习（十六）—— 数据库

    一.数据库介绍 数据库(Database,DB)是按照数据结构来组织.存储和管理数据的,并且是建立在计算机存储设备上的仓库. 数据库指的是以一定方式存储在一起.能为多个用户共享.具有尽可能小的冗余度. ...

  8. phpmyadmin详细的图文使用教程

    做网站用到服务器有很多站长应该都会用到数据库,那么phpmyadmin的使用也会是很多新手站长头大的问题,下面小编详细介绍一下phpmyadmin详细的图文使用教程. 方法/步骤     如何进入ph ...

  9. input时间表单默认样式修改（input[type="date"]）

    一.时间选择的种类: HTML代码:选择日期:<input type="date" value="2018-11-15" /> 选择时间:<i ...

  10. java生成二维码以及读取案例

    今天有时间把二维码这块看了一下,方法有几种,我只是简单的看了一下  google  的  zxing! 很简单的一个,比较适合刚刚学习java的小伙伴哦!也比较适合以前没有接触过和感兴趣的的小伙伴,o ...