微信: 30955
網(wǎng)站制作中導(dǎo)航欄目在網(wǎng) 站內(nèi)部跳轉(zhuǎn)實(shí)現(xiàn)方式,!
發(fā)布于 2022-06-07 16:00:12 閱讀()
點(diǎn)一下導(dǎo)航欄頻道在網(wǎng)頁頁面內(nèi)部結(jié)構(gòu)自動(dòng)跳轉(zhuǎn),;
在平常的html文本文檔中 ,網(wǎng)頁頁面內(nèi)部結(jié)構(gòu)的關(guān)鍵幀自動(dòng)跳轉(zhuǎn),,大家通常應(yīng)用 a 標(biāo)識(shí)
<a href='#關(guān)鍵幀Id'> </a>,與此同時(shí)在必須自動(dòng)跳轉(zhuǎn)到的部位 ,,要設(shè)定一個(gè)關(guān)鍵幀(很形像的了解,木船開船要停船了,,避免漂走
,,最先要拋下錨哈哈大笑),如何設(shè)置關(guān)鍵幀,相匹配的原素 id="關(guān)鍵幀id",如法一
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8">
<title>紅寶書訓(xùn)練
</title>
<style>
div{
width: 100%;
height: 500px;
border: 2px solid ;
background:
orange;
}
</style>
</head>
<body>
<ul>
<li><a
href="#div1">自動(dòng)跳轉(zhuǎn)div1</a></li>
<li><a href="#div2">跳轉(zhuǎn)
div2</a></li>
<li><a href="#div3">自動(dòng)跳轉(zhuǎn)
div3</a></li>
</ul>
<hr>
<div
id="div1">div1</div>
<div id="div2">div2</div>
<div
id="div3">div3</div>
</body>
</html>
這類辦法的缺陷 網(wǎng)頁頁面的URL 會(huì)產(chǎn)生變化 如
URL :file:///C:/Users/31295/Desktop/html5案例/紅寶書訓(xùn)練.html#div1,,當(dāng)點(diǎn)一下上邊<a>,,網(wǎng)頁頁面內(nèi)部結(jié)構(gòu)自動(dòng)跳轉(zhuǎn),與此同時(shí)上邊URL的突出顯示一部分
也會(huì)產(chǎn)生變化 (這不是大家需要的)
方式二,,在js事件中根據(jù)window.location.hash="divId" ,,更改# 號(hào)后邊的 值
但詳細(xì)地址也會(huì)產(chǎn)生變化,覺得跟第一種方式?jīng)]差別,,乃至更不便,。
方式三,運(yùn)用Element.scrollIntoView()方式,讓原素翻轉(zhuǎn)到網(wǎng)頁的窗
口可視性地區(qū),,首先看下方式相匹配的主要參數(shù)
element.scrollIntoView(align-top); // Boolean型參數(shù)
element.scrollIntoView()默認(rèn)設(shè)置主要參數(shù)true;
element.scrollIntoView(scrollIntoViewOptions); // Object型
參數(shù)
1.Element.scrollIntoView() 相當(dāng)于 Element.scrollIntoView(true) 也即初始值true,表明原素的頂部和電腦瀏覽器可視性地區(qū)的
頂部兩端對(duì)齊,。
2.Element.scrollIntoView(false) 表明原素的底部和電腦瀏覽器可視性地區(qū)的底部兩端對(duì)齊。
scrollIntoViewOptions(Object型
主要參數(shù))
{
behavior: "auto" |
"instant" | "smooth",
block:
"start" | "end",
}
1.block:"start" 等同于true,,block:"end"
等同于false,。
2.behavior能操縱頁面跳轉(zhuǎn)的速度 ,auto 和instant 全是馬上立即轉(zhuǎn)跳到所屬關(guān)鍵幀,,不足友善,,smooth表明光滑銜接到
所屬關(guān)鍵幀。
在react運(yùn)用中,,因?yàn)閡rl 轉(zhuǎn)變會(huì)碰觸路由跳轉(zhuǎn),,因此第三種方式甄選,要怎么寫呢?
scrollToAnchor = (anchorName) => {
if (anchorName)
{
// 尋找關(guān)鍵幀
let anchorElement = document.getElementById
(anchorName);
//假如相應(yīng)的id關(guān)鍵幀存有就自動(dòng)跳轉(zhuǎn)
if (anchorElement)
{
anchorElement.scrollIntoView({block: 'start', behavior:
'smooth'});
}
}
<ul&
相關(guān)閱讀
- 太倉企業(yè)網(wǎng)站建設(shè)是選擇價(jià)格還是選擇性能
- 在網(wǎng)絡(luò)營銷中,,怎么設(shè)計(jì)好的網(wǎng)站
- 網(wǎng)站建造主頁對(duì)于網(wǎng)站的重要性
- 2020年找網(wǎng)站制造公司做一個(gè)網(wǎng)站要多少錢,?
- 2020年如何做招引用戶的網(wǎng)站規(guī)劃?
- 2020年規(guī)劃企業(yè)網(wǎng)站建造前,,先看這幾點(diǎn)
- 找網(wǎng)絡(luò)公司做網(wǎng)站之前要自我剖析這九點(diǎn)
- 網(wǎng)站優(yōu)化并不徹底等于SEO優(yōu)化
- 快速了解在網(wǎng)站建設(shè)一般需求多久,?
- 快速了解在網(wǎng)站建設(shè)一般需求多久?
新聞資訊
-
太倉企業(yè)網(wǎng)站建設(shè)是選擇價(jià)格還是選擇性能 2021-07-27
-
在網(wǎng)絡(luò)營銷中,,怎么設(shè)計(jì)好的網(wǎng)站 2020-09-17
-
網(wǎng)站建造主頁對(duì)于網(wǎng)站的重要性 2020-09-04
-
2020年找網(wǎng)站制造公司做一個(gè)網(wǎng)站要多少錢,? 2020-09-04
-
2020年如何做招引用戶的網(wǎng)站規(guī)劃? 2020-09-04