<!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. C++ Primer 笔记——OOP

    1.基类通常都应该定义一个虚析构函数,即使该函数不执行任何实际操作也是如此. 2.任何构造函数之外的非静态函数都可以是虚函数,关键字virtual只能出现在类内部的声明语句之前而不能用于类外部的函数定 ...

  2. know yourself

    Know yourself! ------Socrates 麦穗 古希腊有一位大学者,名叫苏格拉底.一天,他带领几个弟子来到一块麦地边.那正是收获的季节,地里满是沉甸甸的麦穗.苏格拉底对弟子们说:“你 ...

  3. SpringMVC之使用ResponseEntity，java接口返回HttpStatus

    Post请求 一般情况下,在非必须的情况下,使用Jquery实现post请求,而后台返回一般都需要手动封装ResponseUtil,和使用@ResponseBody注解来实现返回.然而我们书上学到的关 ...

  4. spring boot引入json，jsonobject，需要指定jdk15

    spring boot引入json,需要指定jdk15 <dependency> <groupId>net.sf.json-lib</groupId> <ar ...

  5. JAVA 数据类型数组

    普通int: public class Array { //成员变量 private int[] data; private int size; //构造函数,传入数组的容量capacity构造Arr ...

  6. Asp.NetCore 读取配置文件帮助类

    /// <summary> /// 读取配置文件信息 /// </summary> public class ConfigExtensions { public static ...

  7. oracle创建用户和密码以及授权登录问题

    创建有户名和密码CREATE USER 用户名 IDENTIFIED BY 密码;分配权限GRANT connect,dba to 用户名; 1:使用oracle的命令行登录oracle的方式(安装好 ...

  8. jquery源码 整体架构

    一.对外提供接口 对外提供了jQuery. //可以通过jQuery或者$来找到jQuery (function(window,undefined){ //(21,94) 定义了一些变量和函数 jQu ...

  9. 牛客网round1

    题解: 1. 二分答案之后判断 把式子移项使得x,y不关联 #include <bits/stdc++.h> using namespace std; #define rint regis ...

  10. ThemeableBrowser在IOS中按钮图片的使用

    1. 首先确保图片的名称为 ***@1x.png, ***@2x.png 或 ***@3x.png iPhone —— iPhone3GS ***@1x.png iPhone —— iPhone6 * ...