整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
直接上例子代碼給大家一點(diǎn)參考:
<html>
<style>
span {
display: block;
height: 150%;
} /*整點(diǎn)上下的空白 */
</style>
<body>
<button id="from">點(diǎn)擊我</button>
<span></span>
<div id="to">滾動到這:頭條@plzbefat</div>
<span></span>
</body>
<script>
document.getElementById("from").addEventListener("click", () => {
document.getElementById("to").scrollIntoView({
behavior: "smooth", //順滑的滾動
});
});
</script>
</html>
整點(diǎn)例子沒毛病
element.scrollIntoView(); // 等同于element.scrollIntoView(true) 滾動 元素在頂部
element.scrollIntoView(false); // 滾動 元素在底部
element.scrollIntoView(option); //參數(shù)alignToTop:
如果為true，元素的頂端將和其所在滾動區(qū)的可視區(qū)域的頂端對齊。相應(yīng)的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
有時(shí)候，我們想閱讀頁面中某段精彩的內(nèi)容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩 ，很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗(yàn)非常不好，所以我們可以想辦法 實(shí)現(xiàn)點(diǎn)擊某段文字或者圖片跳轉(zhuǎn)到頁面指定位置，方便用戶的閱讀。
這里作為錨點(diǎn)的標(biāo)簽可以是任意元素。
<a href="#aa">跳轉(zhuǎn)到 id 為 aa 標(biāo)記的錨點(diǎn)</a>
<p>-------------分隔線-------------</p>
<div id="aa">a</div>
這里作為錨點(diǎn)的標(biāo)簽只能是 a 標(biāo)簽。
<a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
<div id="abb">bbb</div>
注意：當(dāng)以 ' a 標(biāo)簽 name 屬性作為錨點(diǎn) ' 和 ' 利用 id 為標(biāo)記的錨點(diǎn) ' 同時(shí)出現(xiàn)（即以 name 為錨點(diǎn)和以 id 為錨點(diǎn)名字相同時(shí)），會將后者作為錨點(diǎn)。
window.scrollTo 滾動到文檔中的某個(gè)坐標(biāo)?？商峁┗瑒有Ч刖唧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 為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
let bridge = toEl;
let body = document.body;
let height = 0;
// 計(jì)算該 DOM 節(jié)點(diǎn)到 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() 方法讓當(dāng)前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。
下面也直接上代碼
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意：此功能某些瀏覽器尚在開發(fā)中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。
下面為了方便看效果，把上面的代碼整理在一起。
<!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">跳轉(zhuǎn)到以 id 為 aa 標(biāo)記的錨點(diǎn) a</a>
<p>-------------分隔線-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
<p>-------------分隔線-------------</p>
<div>bb</div>
<a id="linkc">平滑滾動到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 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為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
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>
效果圖：
tml頁面設(shè)置動態(tài)金額滾動效果！
一開始加載頁面，數(shù)字都會過渡滾動到具體數(shù)字上！
代碼：
html:
css:
js:
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
