<!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. jenkins+git+maven 增量部署思路以及相关脚本

    之前通过jenkins+Git+maven这种方式打war包然后scp到测试环境使用,但是现在项目组要求打增量包,即只部署修改的文件和配置文件. 核心问题:如何获取到变动的文件??? 前置条件:初始化 ...

  2. idea的操作

  3. python pip install mysql-python报错

    报错: 下载地址: https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysql-python

  4. 在IDEA中编写Spark的WordCount程序

    1:spark shell仅在测试和验证我们的程序时使用的较多,在生产环境中,通常会在IDE中编制程序,然后打成jar包,然后提交到集群,最常用的是创建一个Maven项目,利用Maven来管理jar包 ...

  5. jloi2015

    题解: [JLOI2015]管道连接 这个很水 比较裸的斯坦纳树dp 斯坦纳树dp就是 g[i][j]表示当前在i点,状态为j 然后转移分为两种 g[i][j]=g[i][k]+g[i][k^j] 另 ...

  6. P2860 [USACO06JAN]冗余路径Redundant Paths

    题解: 首先要边双缩点这很显然 然后变成树上问题 发现dp,dfs好像不太对 考虑一下度数 发现只要在度数为1的点之间连边 但我好像不太会证明这个东西.. 网上也没有看到比较正确的证明方法和连边策略. ...

  7. Windows下Mongodb启动问题

    把mongodb安装完,运行server出现问题

  8. JMeter高并发场景下存在请求无数据

  9. springboot创建错误

    1.Unknown system variable 'query_cache_size' 解决:https://www.cnblogs.com/nicknailo/articles/9074804.h ...

  10. 利用MySQL统计一列中不同值的数量方法示例

    前言 本文实现的这个需求其实十分普遍,举例来说,我们存在一个用户来源表,用来标记用户从哪个渠道注册进来.表结构如下所示… 其中 origin 是用户来源,其中的值有 iPhone .Android . ...