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

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

  2. 论文阅读笔记二十四：Rich feature hierarchies for accurate object detection and semantic segmentation Tech report(R-CNN CVPR2014)

    论文源址:http://www.cs.berkeley.edu/~rbg/#girshick2014rcnn 摘要 在PASCAL VOC数据集上,最好的方法的思路是将低级信息与较高层次的上下文信息进 ...

  3. 关于k8s安装脚本方面的草稿

    周六作的, 慢慢完善. #! /usr/bin/env bash set -e set -u set -x #让此脚本可以重复执行,所以加了一些判断 #使用系统的PATH环境 export PATH= ...

  4. Windows Server 2012 R2 设置 NTP 服务

    其实和以前的server版本配置没啥不一样 都是先改注册表: HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\Config\ ...

  5. .Net开源网络爬虫Abot介绍（转）

    转载地址:http://www.cnblogs.com/JustRun1983/p/abot-crawler.html .Net中也有很多很多开源的爬虫工具,abot就是其中之一.Abot是一个开源的 ...

  6. nethogs命令执行报异常的解决方法

  7. Codeforces 758F Geometrical Progression

    Geometrical Progression n == 1的时候答案为区间长度, n == 2的时候每两个数字都可能成为答案, 我们只需要考虑 n == 3的情况, 我们可以枚举公差, 其分子分母都 ...

  8. ELK安装(windows)

    一.安装JAVA环境 在Oracle官网获取最新版的Java版本,官网:http://www.oracle.com/ 安装完成后,配置JAVA_HOME和JRE_HOME. 二.下载安装ELK htt ...

  9. JavaSE | Lambda| Optional| Stream API

    JDK1.8新特性 1.接口:默认方法. 静态方法 2.Lambda表达式和StreamAPI 3.Optional类 4.新的日期时间API Lambda表达式:为了简化代码,使得Java支持 St ...

  10. 记录pageHelper分页orderby的坑

    pageHelper的count查询会过滤查询sql中的order by条件! pageHelper分页功能很强大,如果开启count统计方法,在你执行查询条件时会再执行一条selet count(* ...