有時候,我們想閱讀頁面中某段精彩的內容,但由于頁面太長,用戶需要自己滾動頁面,查找起來非常麻煩 ,很容易讓人失去繼續往下閱讀的興趣。這樣體驗非常不好,所以我們可以想辦法 實現點擊某段文字或者圖片跳轉到頁面指定位置,方便用戶的閱讀。
這里作為錨點的標簽可以是任意元素。
<a href="#aa">跳轉到 id 為 aa 標記的錨點</a>
<p>-------------分隔線-------------</p>
<div id="aa">a</div>
這里作為錨點的標簽只能是 a 標簽。
<a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標簽的錨點</a>
<div id="abb">bbb</div>
注意:當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現(即以 name 為錨點和以 id 為錨點名字相同時),會將后者作為錨點。
window.scrollTo 滾動到文檔中的某個坐標??商峁┗瑒有Ч刖唧w了解 scrollTo() 可以看看 MDN 中的介紹。
話不多說,看下面代碼
「html 部分」:
<a id="linkc">平滑滾動到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">c</div>
「js 部分」:
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl 為指定跳轉到該位置的DOM節點
let bridge = toEl;
let body = document.body;
let height = 0;
// 計算該 DOM 節點到 body 頂部距離
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滾動到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。
下面也直接上代碼
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意:此功能某些瀏覽器尚在開發中,請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂,所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。
下面為了方便看效果,把上面的代碼整理在一起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#aa">跳轉到以 id 為 aa 標記的錨點 a</a>
<p>-------------分隔線-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標簽的錨點</a>
<p>-------------分隔線-------------</p>
<div>bb</div>
<a id="linkc">平滑滾動到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">dd</div>
<p>-------------分隔線-------------</p>
<div></div>
</body>
<script>
var cc = document.querySelector('#cc')
var linkc = document.querySelector('#linkc')
function to(toEl) {
//ele為指定跳轉到該位置的DOM節點
let bridge = toEl;
let body = document.body;
let height = 0;
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
console.log(height)
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
</script>
<script>
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
</script>
</html>
效果圖:
用JavaScript實現頁面滑動到指定位置加載動畫。
若頁面滾動到class名為group-pic的元素的位置時開始加載
原理: 1.獲取瀏覽器窗口的高度;
2.獲取頁面滾動的高度;
3.獲取頁面距離文檔(document)頂部的高度
offset().top具體指的是距哪里的高度呢?
一些獲寬高度的屬性:
網頁可見區域寬: document.body.clientWidth;
網頁可見區域高: document.body.clientHeight;
網頁可見區域寬: document.body.offsetWidth (包括邊線的寬);
網頁可見區域高: document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬: document.body.scrollWidth;
網頁正文全文高: document.body.scrollHeight;
網頁被卷去的高: document.body.scrollTop;
網頁被卷去的左: document.body.scrollLeft;
網頁正文部分上: window.screenTop;
網頁正文部分左: window.screenLeft;
屏幕分辨率的高: window.screen.height;
屏幕分辨率的寬: window.screen.width;
屏幕可用工作區高度: window.screen.availHeight;
屏幕可用工作區寬度:window.screen.availWidth;
obj.offsetTop 指 obj 距離上方或上層控件的位置,整型,單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置,整型,單位像素。
obj.offsetWidth 指 obj 控件自身的寬度,整型,單位像素。
obj.offsetHeight 指 obj 控件自身的高度,整型,單位像素。
1.offsetTop : 當前對象到其上級層頂部的距離.
不能對其進行賦值.設置對象到頁面頂部的距離請用style.top屬性.
2.offsetLeft : 當前對象到其上級層左邊的距離.
不能對其進行賦值.設置對象到頁面左部的距離請用style.left屬性.
3.offsetWidth : 當前對象的寬度.
與style.width屬性的區別在于:如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.offsetHeight : 與style.height屬性的區別在于:如對象的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值
獲取 HTML 元素的位置坐標,可以使用 JavaScript 中的 DOM 操作來實現。下面是一個示例代碼,展示如何使用 JavaScript 獲取指定類名的元素的位置坐標:
htmlCopy code
<!DOCTYPE html>
<html>
<body>
<div class="my-element">This is a div element.</div>
<script>
// 獲取具有指定類名的元素
var element = document.querySelector('.my-element');
// 獲取元素的位置信息
var rect = element.getBoundingClientRect();
// 輸出元素的位置坐標
console.log('元素的左上角坐標:', rect.left, rect.top);
console.log('元素的右下角坐標:', rect.right, rect.bottom);
console.log('元素的寬度和高度:', rect.width, rect.height);
</script>
</body>
</html>
在上述代碼中,我們首先使用 querySelector() 方法獲取具有指定類名 .my-element 的元素。然后,使用 getBoundingClientRect() 方法獲取該元素的位置信息,返回一個包含左上角坐標、右下角坐標、寬度和高度等屬性的 DOMRect 對象。
最后,我們使用 console.log() 方法將元素的位置坐標輸出到控制臺。您可以根據實際需要使用這些坐標信息。
請注意,獲取的位置坐標是相對于視口(viewport)的坐標,而不是相對于整個頁面的坐標。如果需要獲取相對于頁面的坐標,可以結合 window.scrollX 和 window.scrollY 屬性進行計算。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。