HTML璺宠浆鍒伴〉闈㈡寚瀹氫綅缃殑鍑犵鏂规硶
Posted 鍓嶇inn
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML璺宠浆鍒伴〉闈㈡寚瀹氫綅缃殑鍑犵鏂规硶相关的知识，希望对你有一定的参考价值。
鍓嶈█
鏈夋椂鍊欙紝鎴戜滑鎯抽槄璇婚〉闈腑鏌愭绮惧僵鐨勫唴瀹癸紝浣嗙敱浜庨〉闈㈠お闀匡紝鐢ㄦ埛闇€瑕佽嚜宸辨粴鍔ㄩ〉闈紝鏌ユ壘璧锋潵闈炲父楹荤儲 馃槶锛屽緢瀹规槗璁╀汉澶卞幓缁х画寰€涓嬮槄璇荤殑鍏磋叮銆傝繖鏍蜂綋楠岄潪甯镐笉濂斤紝鎵€浠ユ垜浠彲浠ユ兂鍔炴硶 馃挕 瀹炵幇鐐瑰嚮鏌愭鏂囧瓧鎴栬€呭浘鐗囪烦杞埌椤甸潰鎸囧畾浣嶇疆锛屾柟渚跨敤鎴风殑闃呰銆?/p>
涓€銆?绾?html 瀹炵幇
1. 鍒╃敤 id 涓烘爣璁扮殑閿氱偣
杩欓噷浣滀负閿氱偣鐨勬爣绛惧彲浠ユ槸浠绘剰鍏冪礌銆?/p>
<a href="#aa">璺宠浆鍒?nbsp;id 涓?nbsp;aa 鏍囪鐨勯敋鐐?lt;/a>
<p>-------------鍒嗛殧绾?------------</p>
<div id="aa">a</div>
2. 鍒╃敤 a 鏍囩鐨?name 灞炴€т綔涓洪敋鐐?span class="mq-20">
杩欓噷浣滀负閿氱偣鐨勬爣绛惧彧鑳芥槸 a 鏍囩銆?/p>
<a href="#bb" >璺宠浆鍒?nbsp;name 涓?nbsp;bb 鐨?nbsp;a 鏍囩閿氱偣</a>
<p>-------------鍒嗛殧绾?------------</p>
<a name="bb">name 涓?nbsp;bb 鐨?nbsp;a 鏍囩鐨勯敋鐐?lt;/a>
<div id="abb">bbb</div>
娉ㄦ剰锛氬綋浠?' a 鏍囩 name 灞炴€т綔涓洪敋鐐?' 鍜?' 鍒╃敤 id 涓烘爣璁扮殑閿氱偣 ' 鍚屾椂鍑虹幇锛堝嵆浠?name 涓洪敋鐐瑰拰浠?id 涓洪敋鐐瑰悕瀛楃浉鍚屾椂锛夛紝浼氬皢鍚庤€呬綔涓洪敋鐐广€?/p>
浜屻€?js 瀹炵幇
1. 鍒╃敤 scrollTo()
window.scrollTo 婊氬姩鍒版枃妗ｄ腑鐨勬煇涓潗鏍囥€傚彲鎻愪緵婊戝姩鏁堟灉锛屾兂鍏蜂綋浜嗚В scrollTo() 鍙互鐪嬬湅 MDN 涓殑浠嬬粛銆?/p>
璇濅笉澶氳锛岀湅涓嬮潰浠ｇ爜馃憞
銆宧tml 閮ㄥ垎銆?
<a id="linkc">骞虫粦婊氬姩鍒?nbsp;c</a>
<p>-------------鍒嗛殧绾?------------</p>
<div id="cc">c</div>
銆宩s 閮ㄥ垎銆?
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;
// 璁＄畻璇?nbsp;DOM 鑺傜偣鍒?nbsp;body 椤堕儴璺濈
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 婊氬姩鍒版寚瀹氫綅缃?br> window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
2. 鍒╃敤 scrollIntoView()
Element.scrollIntoView() 鏂规硶璁╁綋鍓嶇殑鍏冪礌婊氬姩鍒版祻瑙堝櫒绐楀彛鐨勫彲瑙嗗尯鍩熷唴銆傛兂鍏蜂綋浜嗚В scrollIntoView() 鍙互鐪嬬湅 MDN 涓殑浠嬬粛銆?/p>
涓嬮潰涔熺洿鎺ヤ笂浠ｇ爜馃憞
銆宧tml 閮ㄥ垎銆?
<a onclick="goTo()">鍒╃敤 scrollIntoView 璺宠浆鍒?nbsp;d</a>
<p>-------------鍒嗛殧绾?------------</p>
<div id="dd">ddd</div>
銆宩s 閮ㄥ垎銆?
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
娉ㄦ剰锛氭鍔熻兘鏌愪簺娴忚鍣ㄥ皻鍦ㄥ紑鍙戜腑锛岃鍙傝€冩祻瑙堝櫒鍏煎鎬ц〃鏍间互寰楀埌鍦ㄤ笉鍚屾祻瑙堝櫒涓€傚悎浣跨敤鐨勫墠缂€銆傜敱浜庤鍔熻兘瀵瑰簲鐨勬爣鍑嗘枃妗ｅ彲鑳借閲嶆柊淇锛屾墍浠ュ湪鏈潵鐗堟湰鐨勬祻瑙堝櫒涓鍔熻兘鐨勮娉曞拰琛屼负鍙兘闅忎箣鏀瑰彉銆?/p>
涓嬮潰涓轰簡鏂逛究鐪嬫晥鏋滐紝鎶婁笂闈㈢殑浠ｇ爜鏁寸悊鍦ㄤ竴璧枫€?/p>
<!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 涓?nbsp;aa 鏍囪鐨勯敋鐐?nbsp;a</a>
<p>-------------鍒嗛殧绾?------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >璺宠浆鍒?nbsp;name 涓?nbsp;bb 鐨?nbsp;a 鏍囩閿氱偣</a>
<p>-------------鍒嗛殧绾?------------</p>
<a name="bb">name 涓?nbsp;bb 鐨?nbsp;a 鏍囩鐨勯敋鐐?lt;/a>
<p>-------------鍒嗛殧绾?------------</p>
<div>bb</div>
<a id="linkc">骞虫粦婊氬姩鍒?nbsp;c</a>
<p>-------------鍒嗛殧绾?------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">鍒╃敤 scrollIntoView 璺宠浆鍒?nbsp;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>
鏁堟灉鍥撅細
以上是关于HTML璺宠浆鍒伴〉闈㈡寚瀹氫綅缃殑鍑犵鏂规硶的主要内容，如果未能解决你的问题，请参考以下文章