Jquery根据滚动条显示返回按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JQ.js"></script>
<style>
.c2
{
width: 100px;
height: 100px;
background-color: green;
position: fixed;
line-height: 100px;
bottom: 15px;
right: 15px;
display: none;
}
</style>
</head>
<body>
<input id="i1" type="button" value="点我">
<div class="c2">返回顶部</div>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>
<script>
$(window).scroll(function () {
if ($(this).scrollTop()>100)
{
$('.c2').css('display','block')
}
else {
$('.c2').css('display','none')
}
});
$('#i1').click(function () {
let $obj=$('.c1');
$obj.css({height:'100px',width:'100px',backgroundColor:'red'});
$obj.offset({left:100,top:100})
});
$('.c2').click(function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
Jquery根据滚动条显示返回按钮的更多相关文章
- android toolbar 显示返回按钮并改变按钮颜色
<android.support.design.widget.AppBarLayout android:id="@+id/about_appbar" android:layo ...
- jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
- jquery判断滚动到某个div显示底部按钮
判读滚动某个div显示底部按钮 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta char ...
- IOS让返回按钮显示自定义标题而不是上个ViewController的title
在开发IOS的时候发现当从一个ViewController跳转到另一个ViewController时,被跳转到的那个ViewController的返回按钮总是显示的是上个ViewController的 ...
- jquery 微信端 点击物理返回按钮，弹出提示框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- jQuery制作go to top按钮
转自:http://www.w3cplus.com/jquery/scrolling-to-the-top-with-jquery 每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人 ...
- 浏览器返回按钮不会触发onLoad事件
最近在做一个移动端项目,发现移动端某些返回和PC端是有差异的, 比如ios中返回按钮是直接使用缓存的, 不会执行任何js代码, 这个问题很蛋疼, 例如, 在提交的时候将按钮设置为loading状态, ...
- 【jquery】jquery 自定义滚动条
可以自由的给滚动条定义背景,上下按钮,当然不仅仅是颜色,连图片当背景也可以.支持鼠标滚轮,点击滚动条滚轴定位,上下按钮久按加速,兼容 ie,firefox,chrome. 调用方法: $(" ...
随机推荐
- ASP.NET Core如何使用WSFederation身份认证集成ADFS
如果要在ASP.NET Core项目中使用WSFederation身份认证,首先需要在项目中引入NuGet包: Microsoft.AspNetCore.Authentication.WsFedera ...
- Tomcat优化之容易集合经验
Tomcat优化1. 如何加大tomcat连接数在tomcat配置文件server.xml中的<Connector ... />配置中,和连接数相关的参数有: maxThreads : t ...
- 单链表的python实现
首先说下线性表,线性表是一种最基本,最简单的数据结构,通俗点讲就是一维的存储数据的结构. 线性表分为顺序表和链接表: 顺序表示指的是用一组地址连续的存储单元依次存储线性表的数据元素,称为线性表的顺序存 ...
- 如何向微软 Docs 和本地化社区提交翻译贡献
Docs (docs.microsoft.com)是微软新版的文档网站,重新规划了各项技术栈的文档结构,看起来比 MSDN 可读性更好.虽然 Docs 提供了各种语言的版本,但大多是机器翻译,某些中文 ...
- H5 36-背景定位属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 关于php,python,javascript文件或者模块导入引入的区别和联系
前言: 我们经常看到编程语言之间,文件或者模块的引来引去的,但是他们在各个编程语言之间有什么区别和联系呢? 1.javascript (1).全局引入方式: <script src='xxxxx ...
- mysql索引及优化
索引; 2.索引入门对于任何DBMS,索引都是进行优化的最主要的因素.对于少量的数据,没有合适的索引影响不是很大,但是,当随着数据量的增加,性能会急剧下降.如果对多列进行索引(组合索引),列的顺序非常 ...
- pip 安装 和 卸载 django
1. 在dos命令行中输入 pip 如下命令进行安装: 安装最新的版本的 Django 命令如下: pip install django 安装 指定版本的 Django 命令如下: pip insta ...
- Python_函数的有用信息、带参数的装饰器、多个装饰器装饰一个函数
函数的有用信息 代码1: def login(username, password): """ 此函数需要用户名,密码两个参数,完成的是登录的功能. :return: T ...
- 软件工程(FZU2015) 赛季得分榜，第六回合
SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分=团队得分+个人贡献分 个人贡献分: 个人 ...