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= ...
随机推荐
- Java设计模式—状态模式
状态模式又是一个比较难的设计模式 定义如下: 当一个对象内在状态改变时允许其改变行为,这个对象看起来像改变了其类. 个人理解:通俗的讲,状态模式就是状态的改变引起了行为的改变,但是,我们只能看到行为的 ...
- 使用WICleanup清理Windows Installer 冗余文件
使用WICleanup清理Windows Installer 冗余文件 | 浏览:816 | 更新:2015-11-02 10:43 | 标签:Win7 Win10 1 2 3 4 5 6 7 分步阅 ...
- [iOS] UIFont 设置字体
label.font = [UIFont fontWithName:@"Arial-BoldItalicMT" size:24]; 字体名如下: Font Family: Amer ...
- 算法day02
算法动态演示网站 数组是有长度限制的,有类型限制 CPU计算 每次是2的32位的,32根线,支持最大是4G 数组:线性表 列表:动态表链表:存储的位置不是连续的 insert 时间复杂度是 Onapp ...
- [翻译] MGConferenceDatePicker
MGConferenceDatePicker https://github.com/matteogobbi/MGConferenceDatePicker MGConferenceDatePicker ...
- 沉淀再出发:web服务器和应用服务器之间的区别和联系
沉淀再出发:web服务器和应用服务器之间的区别和联系 一.前言 关于后端,我们一般有三种服务器(当然还有文件服务器等),Web服务器,应用程序服务器和数据库服务器,其中前面两个的概念已经非常模糊了,但 ...
- PHPWAMP自启异常，服务器重启后Apache等服务不会自动重启的原因分析
在使用“PHPWAMP自动任务”时,不少学生遇到如下问题: “phpwamp绿色集成环境重启动电脑(服务器)后,不会自动启动网站服务” (如果是其他环境或是自己搭建时遇到此问题,也是可以用此法解决) ...
- 深入浅出SharePoint2010——请假系统无代码篇之权限设计
首选我们需要区分3个跟权限相关的概念. 权限项目(Permission):最小的权限粒度.比如创建列表项.审批等. 权限级别(Permission Level):权限项目不能直接赋予用户或者用户组,只 ...
- redis下的持久化保存
rdb.h rdb.c ---> 完成数据保存到临时文件,再利用rename保存到指定文件的过程: 如果需要写一个数据持久化保存的功能时,可以参考这部分代码: //rdb API int ...
- Mac快捷锁屏设置
Mac快捷锁屏设置: 1. 安全性与隐私 - 通用:进入睡眠或开始屏幕保护程序 --> “ 立即 ”. 2. 桌面与屏幕保护程序 - 触发角:启动屏幕保护程序 注:第二步中触发角可以设置四个角中 ...