js点击回到顶部2
<!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的更多相关文章
- js点击回到顶部
---恢复内容开始--- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 点击回到顶部（jQuery）
写这个点击回到顶部.我采用的是最简单的jQuery,的点击事件 和animate特效. html部分 <div class="pulltop"> <img sr ...
- jquery点击回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js悬浮、回到顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js效果之回到顶部
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- js中点击返回顶部
window.scrollTo(0, 0);当点击返回顶部的时候调用这个方法即可 handleScrollTop(){ window.scrollTo(0, 0); }
- js+css实现点击回到顶部的效果（最低兼容至ie7）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 【原生js实现一键回到顶部】
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- JS实现页面回到顶部效果
[代码] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
随机推荐
- js 浮点数相加 变成字符串 解决方案
var count = 0; count+=Number(parseFloat(value[i]['sla']).toFixed(2)); 数字相加的时候最好使用Number转换一下
- 论文阅读笔记二十七：Faster R-CNN: Towards Real-Time Object Detection with Region Proposal Networks（CVPR 2016）
论文源址:https://arxiv.org/abs/1506.01497 tensorflow代码:https://github.com/endernewton/tf-faster-rcnn 室友对 ...
- 20165323 结对编程之四则运算week2-整体总结
一.需求 实现一个命令行程序,要求: 1.自动生成小学四则运算题目(加.减.乘.除) 2.支持整数 3.支持多运算符(比如生成包含100个运算符的题目) 4.支持真分数 5.能判断错误,在输入错误结果 ...
- MyBatis - 7.MyBatis逆向 Generator
MyBatis Generator: 简称MBG,是一个专门为MyBatis框架使用者定制的代码生成器,可以快速的根据表生成对应的映射文件,接口,以及bean类.支持基本的增删改查,以及QBC风格的条 ...
- linux操作系统中oracle数据库的密码过期问题解决
1:首先确定linux登录的用户是root 切换到数据库用户 su oracle(切记,如果这里su oracle不可以,那么就使用此命令su - oracle,这个命令切换到数据库用户肯定可以成功. ...
- json 解析代码 全语言
Javascript: 1.使用eval var parse_json_by_eval = function(str){ return eval('('+str+')'); } var value = ...
- Zabbix监控Nginx性能状态
Nginx在生产环境中的应用越来越广泛,所以需要对nginx的性能状态做一些监控,从而发现故障隐患,Ngnx的监控指标可分为:基本活动指标,错误指标,性能指标 监控Nginx思路: 1)首先,要想监控 ...
- Zk 集群概念
https://blog.csdn.net/gs80140/article/details/51496925
- LeetCode 237. 删除链表中的节点
/** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...
- JavaEE 之 Spring Data JPA
1.事务 a.事务的关键属性(ACID) ①原子性(atomicity):事务的原子性确保动作要么全部完成,要么完全不起作用 ②一致性(consistency):一旦所有事务动作完成,事务就被提交.也 ...