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= ...
随机推荐
- 微信小程序-movable-view
<view class="page-body"> <view class="page-section"> <view class= ...
- How to block a specific IP Address using UFW
How to block a specific IP Address using UFW The key to blocking a specific IP address with UFW is t ...
- maven项目ssh框架的整合
1.环境 eclipse版本:Eclipse Mars2 4.5jdk版本:1.8maven版本:apache-maven 3.3.9zhnegs这是主要的开发工具版本,ssh的各种jar包版本就不列 ...
- ubuntu16下面安装vmware tools后仍然未全屏问题
1.默认下载ubuntu16的iso镜像后,自带的有vmtools.解压 tar -xzvf VMwareTools-10.0.6-3595377.tar.gz 进入解压目录. 执行:sudo ./ ...
- java将int类型的变量转化成String类型的
第一种方法:String的valueOf方法,int i=5;String s=String.valueOf(i);第二种方法,直接在int后面加一个空的字符串,因为在java里面,默认任务int类型 ...
- c# 设计模式 之：简单工厂、工厂方法、抽象工厂之小结、区别
很多时候,我发现这三种设计模式难以区分,常常会张冠李戴闹了笑话.很有必要深入总结一下三种设计模式的特点.相同之处和不同之处. 1 本质 三个设计模式名字中都含有“工厂”二字,其含义是使用工厂(一个或一 ...
- jQuery 插件封装的方法
方式1.$.fn.xxx ==>针对元素添加方法: ;(function ($) { $.fn.myPlugin = function () { //你自己的插件代码 }; })(jQuer ...
- 查询login什么时候过期
-- Show all logins where the password is over 60 days old --查看60天没改密码的login SELECT name, LOGINPROPER ...
- 将csv导出json格式
将csv导出json格式 import os,csv,json cf = open('D:\OneDrive\\Tech\\Script\\Powershell_Script\\Uxin_work\\ ...
- Linux(CentOS)网卡的基本设置
临时设置 修改IP地址: ifconfig eth0 10.60.45.205 mask 255.255.255.0 修改网关地址 route add default gw 10.60.45.1 de ...