<!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. excel生成数据

    Sub function1()Dim i As LongFor i = 1 To 1000000Cells(i, 1) = "A" & iCells(i, 2) = &qu ...

  2. AI-restful接口写法

    AI-restful接口写法 restful接口规范 http协议请求方式:GET POST DELETE PUT PATCH OPTION HEAD 设计接口时必须使用这种格式的数据 GET 查看数 ...

  3. Android 第二波

    三面,4个技术人员面试的问题不是很难.问题如下: 1. Service两种方式的区别 首先说service分为两种,一种是绑定的一种是非绑定的非绑定的生命周期是 onCreate(),onStartC ...

  4. Html中，id、name、class、type的区别

    <input type="text" name="name" id="name" class="txt"> ...

  5. json2csharp & json 格式化

    json2csharp: http://json2csharp.com/ bejson: http://www.bejson.com/

  6. 最大子数组（I, II, III，IV，V）和最大子数组乘积 (动态规划)

    I 找一个连续最大子数组,sum加到nums[i], 如果前面子数组和<0则舍去,从头开始. class Solution { public: /** * @param nums: A list ...

  7. 基于AspNet Core2.0 开发框架，包含简单的个人博客Demo

    大家好,最近离职了,利用闲暇时间就捣鼓了一个基于AspNet Core开发框架,分享出来希望能给AspNet Core学者带来一些帮助,同时也能跟大家一起学习.当然了,由于我的个人技术及经验的有限,框 ...

  8. Ansible 详解

    原文:https://www.cnblogs.com/keerya/p/7987886.html#_label0,有改动 一.Ansible简介 1.ansible是什么 a.ansible是新出现的 ...

  9. BZOJ4456/UOJ#184[Zjoi2016]旅行者 分治 最短路

    原文链接http://www.cnblogs.com/zhouzhendong/p/8682133.html 题目传送门 - BZOJ4456 题目传送门 - UOJ#184 题意 $n\times ...

  10. debian9 开启rc.local服务

    由于某些软件并没有增加开启启动的服务,很多时候需要手工添加,一般我们都是推荐添加命令到 /etc/rc.local 文件,但是 Debian 9 默认不带 /etc/rc.local 文件,而 rc. ...