js jquery 获取某一元素到浏览器顶端的距离实现方法


Posted in jQuery onSeptember 05, 2018

如下所示:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
  body{
   margin: 0;
   padding: 0;
  }
  .mdiv{
   width: 100px;
   height: 100px;
   background-color: red;
  }
 </style>
</head>
 
<body>
<div style="height: 1000px"></div>
<div class="banner"></div>
<script src="jquery.js"></script> //自行下载
<script>
 //原生
 //获取div距离顶部的距离
 var mTop = document.getElementsByClassName('banner')[0].offsetTop;
 //减去滚动条的高度
 var sTop = document.body.scrollTop;
 var result = mTop - sTop;
 console.log(result);
 //Jquery
 mTop = $('.banner')[0].offsetTop;
 sTop = $(window).scrollTop();
 result = mTop - sTop;
 console.log(result);
</script>
</body>

以上这篇js jquery 获取某一元素到浏览器顶端的距离实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery实现div跟随鼠标移动
Aug 20 jQuery
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
Jquery动态列功能完整实例
Aug 30 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
jQuery实现动态向上滚动
Dec 21 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 #jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 #jQuery
jQuery常见的遍历DOM操作详解
Sep 05 #jQuery
jQuery实现获取及设置CSS样式操作详解
Sep 05 #jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 #jQuery
为jquery的ajax请求添加超时timeout时间的操作方法
Sep 04 #jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 #jQuery
You might like
YII实现分页的方法
2014/07/09 PHP
PHP图像处理之使用imagecolorallocate()函数设置颜色例子
2014/11/19 PHP
PHP制作用户注册系统
2015/10/23 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
犀利的js 函数集合
2009/06/11 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
浅析python 字典嵌套
2020/09/29 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
华为慧通笔试题
2016/04/22 面试题
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
通知函的格式
2015/04/27 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
孔繁森观后感
2015/06/10 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
anaconda python3.8安装后降级
2021/06/11 Python