<!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. AI-视图组件-五个接口的最终简化版

    五个接口最终版 #url.py # 序列化最贱版本 url(r'^customer/$', views.CustomerView.as_view({"get":"list ...

  2. Navicat Premium 12.1.8.0安装与激活

    本文介绍Navicat Premium 12.1.8.0的安装.激活与基本使用. 博主所提供的激活文件理论支持Navicat Premium 12.0.x系列和Navicat Premium 12.1 ...

  3. hive内group by取第一条数据，Hive中row_number的使用

    1.hive的分组和组内排序---语法 语法: row_number() over (partition by 字段a order by 计算项b desc ) rank rank是排序的别名 par ...

  4. Ubuntu强制重启后提示emergency mode

    起因 win10+Ubuntu16.04双系统,在ubuntu下训练一个卷积网但是显存拙计卡死了,于是手贱强制按下电源开关重启. 现象 重启后从grub进ubuntu,并不进图形化的登录界面,而是提示 ...

  5. python---使用递归实现谢尔宾斯基三角形及汉诺塔

    渐入佳境. # coding: utf-8 import turtle ''' # =================turtle练手== def draw_spiral(my_turtle, lin ...

  6. webpack学习笔记--配置resolve

    Resolve Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块,Resolve 配置 Webpack 如何寻找模块所对应的文件. Webpack 内置 JavaScript 模块化语 ...

  7. [转] Webpack-CommonsChunkPlugin

    当前项目结构   项目结构 其中 Greeter.js 引用了 config.json main.js 和 second.js 都引用了 Greeter.js main.js 还引用了 onlyfor ...

  8. [转] 浅析JavaScript设计模式——发布-订阅/观察者模式

    前一段时间一直在写CSS3的文章 一直都没写设计模式 今天来写写大名鼎鼎观察者模式 先画张图 观察者模式的理解 我觉得还是发布-订阅模式的叫法更容易我们理解 (不过也有的书上认为它们是两种模式……)  ...

  9. Android 实现连续两次点击或连续多次点击退出应用

    前言:  日常开发过程中,经常会遇到“连续点击两次退出应用”的需求(和“连续点击多次”的需求(如:手机从设置中进入开发者选项). 直接上代码:双击退出: private long exitTime = ...

  10. C# 之 HttpResponse 类

    Response 对象,派生自HttpResponse 类,该类封装来自 ASP.NET 操作的 HTTP 响应信息.存在于System.Web命名空间下. 注:MIME(Multipurpose I ...