jQuery之scroll用法实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding: 0;
}
.div1,.div2{
width: 100%;
height: 800px; }
.div1{
/*border: 5px solid red;*/
/*padding: 20px;*/
/*margin: 2px;*/
background-color:antiquewhite;
}
.div2{
background-color:rebeccapurple;
}
.returntop{
position: fixed;
right: 20px;
bottom: 20px;
width: 80px;
height: 50px;
background-color:yellow;
text-align: center;
line-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="returntop hide" onclick="returntop()">返回顶部</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 相对于视图窗口
// console.log($('.div1').offset().top);
// console.log($('.div1').offset().left);
//
// console.log($('.div2').offset().top);
// console.log($('.div2').offset().left) // console.log($('.div1').position().top);
// console.log($('.div1').position().left); // console.log($('.div2').position().top);
// console.log($('.div2').position().left)
window.onscroll=function () {
// console.log($(window).scrollTop())
if($(window).scrollTop()>50){
$('.returntop').removeClass('hide')
}
else {
$('.returntop').addClass('hide')
}
}
function returntop() {
$(window).scrollTop(0);
}
</script>
</body>
</html>
jQuery之scroll用法实例的更多相关文章
- jQuery ajax - getJSON() 用法实例
实例 从 test.js 载入 JSON 数据并显示 JSON 数据中一个 name 字段数据: $.getJSON("test.js", function(json){ aler ...
- jQuery.holdReady()方法用法实例
调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法.可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件 ...
- jquery的on()用法实例
首先,先看官方描述: 再来,用实例解释一下: 1.简单绑定单个事件: $("body").on("click",".edit_btn",fu ...
- 【学亮IT手记】jQuery each()函数用法实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jQuery中on()方法用法实例
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法 ...
- jquery下json数组的操作用法实例
jquery下json数组的操作用法实例: jquery中操作JSON数组的情况中遍历方法用的比较多,但用添加移除这些好像就不是太多了. 试过json[i].remove(),json.remove( ...
- jQuery包裹节点用法完整示例
本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...
- Jquery remove 高级用法
Jquery remove 高级用法 html 代码 <div class="file-image">abc1111</div><div class= ...
随机推荐
- express中间件笔记整理
expressexpress概念:express是基于nodejs的HTTPS模块构建出来的一个web应用开发框架,在nodejs之上扩展了 Web 应用所需的基本功能.本质上express应用就是调 ...
- MySQL数据库(6)----配置文件 my.cnf 的使用
1. 使用源码安装好MySQL后,其配置文件一般位于 /usr/local/my.cnf,可以使用如下命令查看查看配置文件的搜索顺序: root@javis:~$ mysqld --help --ve ...
- CSS的下拉菜单被挡住，修改Z-INDEX也不成功
CSS的下拉菜单被挡住,修改Z-INDEX也不成功 做了一个鼠标放上去就出现的下拉菜单,但是这个下拉的内容被挡住了. Z-INDEX 是设置不同块的层次的,我修改了问题还是有. 后来发现是必须要把该便 ...
- volley3--Volley类
Volley这个类,Volley作为整个框架的入口,其实就是创建了一个RequestQueue队列 public class Volley { /** * Default on-disk cache ...
- 仿拉手团购App8-- 更多模块
1.获得缓存大小和清除缓存 应用内数据的所有路径: /data/data/com.xxx.xxx/cache - 应用内缓存(注:对应方法getCacheDir()) /data/data/com.x ...
- 爬虫day03之scrapy安装与使用
参考博客 技术问题不要问,业务问题可以问是不是有一种更好的方法? scrapy windows安装 1. 安装scrapy 参考博客 https://www.cnblogs.com/wupeiqi/a ...
- Windows Azure系列公开课 - 第二课：为什么选择Windows Azure（上）
Windows Azure是微软的云平台,可以提供广泛服务.您可以通过它搭建.部署并管理解决方案,用于实现您可以想象的几乎任何目标.换言之,WindowsAzure是拥有无限可能的世界.无论您是需要运 ...
- SQL捕捉blocking信息
场景: 客户抱怨数据库慢,但是回去看的时候,可能已经不慢了,为了查出当时到底是什么原因导致数据慢,制作了下面的存储过程,然后每隔3分钟运行一遍,把blocking信息插入一个数据库中. 主要就是查询s ...
- Python 爬虫练习项目——异步加载爬取
项目代码 from bs4 import BeautifulSoup import requests url_prefix = 'https://knewone.com/discover?page=' ...
- ASP.NET中的身份验证有那些？你当前项目采用什么方式验证请解释
ASP.NET身份验证模式包括Windows.Forms(窗体).Passport(护照)和None(无). l Windows身份验证—常结合应用程序自定义身份验证使用使用这种身份验证模式时,AS ...