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