網(wǎng)站制作中導(dǎo)航欄目在網(wǎng)站內(nèi)部跳轉(zhuǎn)實(shí)現(xiàn)方式
2017-06-12 分類： 網(wǎng)站制作
點(diǎn)擊導(dǎo)航欄目在頁面內(nèi)部跳轉(zhuǎn)；
在普通的html文檔中 ，頁面內(nèi)部的錨點(diǎn)跳轉(zhuǎn)，我們通常使用 a 標(biāo)簽 ,同時(shí)在需要跳轉(zhuǎn)到的位置 ，要設(shè)置一個(gè)錨點(diǎn)（很形象的理解，漁船出海要停船了，防止漂走，首先要拋錨大笑），怎么設(shè)置錨點(diǎn),對(duì)應(yīng)的元素 id="錨點(diǎn)id",如法一
這種方法的缺點(diǎn) 頁面的URL 會(huì)發(fā)生變化 如URL ：file:///C:/Users/31295/Desktop/html5實(shí)例/紅寶書練習(xí).html#div1，當(dāng)點(diǎn)擊上方，頁面內(nèi)部跳轉(zhuǎn)，同時(shí)上方URL的標(biāo)紅部分也會(huì)發(fā)生變化 （這不是我們想要的）
方法二，在js事件中通過window.location.hash="divId" ，改變# 號(hào)后面的 值 但地址也會(huì)發(fā)生變化，感覺跟第一種方法沒區(qū)別，甚至更麻煩。
方法三，利用Element.scrollIntoView()方法，讓元素滾動(dòng)到瀏覽器的窗口可視區(qū)域，先看下方法對(duì)應(yīng)的參數(shù)
element.scrollIntoView(align-top); // Boolean型參數(shù) element.scrollIntoView()默認(rèn)參數(shù)true;
element.scrollIntoView(scrollIntoViewOptions); // Object型參數(shù)
1.Element.scrollIntoView() 等同于 Element.scrollIntoView(true) 也即默認(rèn)值true,表示元素的頂端和瀏覽器可視區(qū)域的頂端對(duì)齊。
2.Element.scrollIntoView(false) 表示元素的底端和瀏覽器可視區(qū)域的底端對(duì)齊。
scrollIntoViewOptions(Object型參數(shù))
{
behavior: "auto" | "instant" | "smooth",
block: "start" | "end",
}
1.block:"start" 相當(dāng)于true，block:"end" 相當(dāng)于false。
2.behavior能控制頁面跳轉(zhuǎn)的快慢 ，auto 和instant 都是立即直接跳轉(zhuǎn)到所在錨點(diǎn)，不夠友好，smooth表示平滑過渡到所在錨點(diǎn)。
在react應(yīng)用中，由于url 變化會(huì)觸及路由跳轉(zhuǎn)，所以第三種方法優(yōu)選，怎么寫呢?
scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到錨點(diǎn)
let anchorElement = document.getElementById(anchorName);
//如果對(duì)應(yīng)的id錨點(diǎn)存在就跳轉(zhuǎn)
if (anchorElement) {
anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});
}
}
網(wǎng)站欄目：網(wǎng)站制作中導(dǎo)航欄目在網(wǎng)站內(nèi)部跳轉(zhuǎn)實(shí)現(xiàn)方式
文章地址：http://www.rwnh.cn/news/75480.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站制作等
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 企業(yè)建站系統(tǒng)一般有哪些 2017-06-11
- 企業(yè)網(wǎng)站改版應(yīng)該注意的問題 2017-06-10
- 虛擬主機(jī)和云服務(wù)器有哪些區(qū)別 2017-06-09
- 企業(yè)網(wǎng)站制作采用建站cms的好處有哪些 2017-06-08
- 企業(yè)網(wǎng)站制作一定要保持耐心與積極的態(tài)度 2017-06-03
- 獨(dú)立IP的虛擬主機(jī)有哪些競爭力 2017-06-11
- 網(wǎng)站制作中動(dòng)態(tài)與靜態(tài)有什么區(qū)別 2017-06-08
- 網(wǎng)站使用獨(dú)立IP虛擬主機(jī)有什么好處 2017-06-05
- 新手站長怎么網(wǎng)站制作？ 2017-06-04
- 網(wǎng)站制作基本要素知曉 2017-06-04
- 個(gè)人做企業(yè)網(wǎng)站制作要多少錢 2017-06-04
- 做企業(yè)網(wǎng)站制作要多少錢 2017-06-03
- 企業(yè)網(wǎng)站制作百度快照被劫持淺談 2017-06-03
- 企業(yè)網(wǎng)站制作網(wǎng)站安全評(píng)估技術(shù)與漏洞挖掘技術(shù) 2017-06-02
- 網(wǎng)站制作中關(guān)于廣告條的分布 2017-06-02
- 網(wǎng)站制作有價(jià)值內(nèi)容讓用戶喜歡網(wǎng)站 2017-06-02
- 視覺設(shè)計(jì)在網(wǎng)站制作中重要性 2017-03-22
- 網(wǎng)站制作中色彩的搭配方法 2017-05-31
- 建站公司服務(wù)范圍 2017-05-31