快捷導(dǎo)航

js jquery 獲取某一元素到瀏覽器頂端的距離實(shí)現(xiàn)方法

更新時(shí)間：2018年09月05日 11:11:54 作者：根子的數(shù)據(jù)庫(kù)

今天小編就為大家分享一篇js jquery 獲取某一元素到瀏覽器頂端的距離實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

如下所示：

<!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;
 //減去滾動(dòng)條的高度
 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 獲取某一元素到瀏覽器頂端的距離實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序?qū)崿F(xiàn)全局狀態(tài)管理的方法整理
已知微信小程序中如果要做到全局狀態(tài)共享，常用的有四種方式，分別是globalData、本地緩存、mobx-miniprogram和westore，本文將帶大家看看mobx-miniprogram是如何實(shí)現(xiàn)的小程序的全局狀態(tài)管理，需要的可以收藏一下
2023-06-06
微信小程序如何處理token過(guò)期問(wèn)題
最近再做個(gè)項(xiàng)目，需要檢查token過(guò)期，跳轉(zhuǎn)到登錄頁(yè)面，要求用戶重新登錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
JavaScript手寫源碼之實(shí)現(xiàn)arrify轉(zhuǎn)數(shù)組
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)arrify轉(zhuǎn)數(shù)組，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一點(diǎn)的幫助，需要的可以參考一下
2023-02-02
javascript求日期差的方法
這篇文章主要介紹了javascript求日期差的方法,涉及JavaScript日期及字符串操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2016-03-03
js觀察者模式的介紹及使用
這篇文章主要介紹了java設(shè)計(jì)模式中觀察者模式，全文通過(guò)舉例子及代碼的形式進(jìn)行了一個(gè)簡(jiǎn)單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)
2021-08-08
JS制作簡(jiǎn)單的三級(jí)聯(lián)動(dòng)
本文給大家分享的是使用javascript實(shí)現(xiàn)的一個(gè)簡(jiǎn)單的三級(jí)聯(lián)動(dòng)菜單，非常簡(jiǎn)單實(shí)用，有需要的小伙伴過(guò)來(lái)參考下吧。
2015-03-03
旺旺在線客服代碼旺旺客服代碼生成器
很多朋友想在網(wǎng)站上插入自己的阿里旺旺在線聯(lián)系圖片，就像是和QQ一樣，小編為大家詳細(xì)講解了旺旺在線客服代碼以及旺旺客服代碼生成器，希望能夠幫助到大家。
2018-01-01
javascript動(dòng)畫算法實(shí)例分析
這篇文章主要介紹了javascript動(dòng)畫算法,實(shí)例分析了javascript實(shí)現(xiàn)動(dòng)畫效果的實(shí)現(xiàn)及使用技巧,需要的朋友可以參考下
2015-07-07
前端深入理解Typescript泛型概念
這篇文章主要介紹了前端深入理解Typescript泛型概念，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-03-03
javascript 隨機(jī)展示頭像實(shí)現(xiàn)代碼
隨機(jī)展示小頭像，隨機(jī)數(shù)包括位置、層級(jí)、大小、透明度等
2011-12-12