js jquery 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法
更新時間：2018年09月05日 11:11:54 作者：根子的數(shù)據(jù)庫
今天小編就為大家分享一篇js jquery 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如下所示：
<!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 獲取某一元素到瀏覽器頂端的距離實現(xiàn)方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單動態(tài)表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
本文是上一篇文章《用js讀、寫、刪除Cookie代碼分享及詳細注釋說明》發(fā)現(xiàn)了些問題，進行分析解決，推薦給大家2014-12-12
TypeScript是Javascrip t超集,支持靜態(tài)類型檢測,可以在編譯期提前暴露問題,節(jié)省debug時間,下面這篇文章主要給大家介紹了關于TypeScript開發(fā)的6六個實用小技巧,需要的朋友可以參考下2021-09-09
在IE中還可以在onreadystatechange事件里進行判斷等方法。2009-07-07
基于JS實現(xiàn)Android,iOS一個手勢動畫效果
這篇文章主要介紹了基于JS實現(xiàn)Android,iOS一個手勢動畫效果 的相關資料,需要的朋友可以參考下2016-04-04
這篇文章主要給大家介紹了關于three.js中文文檔學習之通過模塊導入的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或使用three.js具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)簡單跑馬燈效果 ，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
JavaScript實現(xiàn)簡易輪播圖最全代碼解析(ES5)
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡易輪播圖最全代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
原型鏈是JavaScript中繼承的主要方法。本文重點給大家介紹JavaScript基于原型鏈的繼承，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
這篇文章主要介紹了JavaScript獲取服務器端時間的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11