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= ...
随机推荐
- LeetCode赛题----Find Left Most Element
问题描述 Given a binary tree, find the left most element in the last row of the tree. Example 1: Input: ...
- php 在字符串指定位置插入新字符
因为项目用到DataTable表格加载后台数据,要连表查询虚拟机选中的策略状态,所以想到先把策略表内容取出来,组成一个'<select><option value="1&q ...
- python文本操作
file_obj=file("文件路径","模式") 打开文件的模式有: r,以只读方式打开文件 w,打开一个文件只用于写入.如果该文件已存在则将其覆盖.如果该 ...
- jquery遍历之children()与find()的区别
hildren(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈).参数可选,添加参数表示通过选择器进行过滤,对元素进行筛选. .find(selector)方法是返回匹配元 ...
- iOS设计模式 - 适配器
iOS设计模式 - 适配器 效果 说明 1. 为了让客户端尽可能的通用,我们使用适配器模式来隔离客户端与外部参数的联系,只让客户端与适配器通信. 2. 本教程实现了适配器模式的类适配器与对象适配器两种 ...
- 将csv导出json格式
将csv导出json格式 import os,csv,json cf = open('D:\OneDrive\\Tech\\Script\\Powershell_Script\\Uxin_work\\ ...
- [EffectiveC++]item04:Make sure the objects are initialized before they're used
28 页 C++规定,对象的成员变量的初始化动作发生在进入构造函数本体之前. 构造函数的一个较佳的写法是,使用所谓的member initialization list替换赋值动作. 29页 但请立下 ...
- （转）如何解决VC中的警告warning C4251 needs to have dll-interface
这通常是由于以数据成员方式在DLL导出类中使用了模板类造成的.比如: #include <iostream> #include <vector> using namespace ...
- 6、Node.js 事件循环
#########################################################################################Node.js 事件循 ...
- IOS XMPP（即时通讯的框架）
#import "AppDelegate.h" #import "XMPPFramework.h" /* * 在AppDelegate实现登录 1. 初始化XM ...