内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

網(wǎng)站制作中導(dǎo)航欄目在網(wǎng)站內(nèi)部跳轉(zhuǎn)實現(xiàn)方式

2017-06-12    分類: 網(wǎng)站制作

點擊導(dǎo)航欄目在頁面內(nèi)部跳轉(zhuǎn);
在普通的html文檔中 ,頁面內(nèi)部的錨點跳轉(zhuǎn),我們通常使用 a 標(biāo)簽 ,同時在需要跳轉(zhuǎn)到的位置 ,要設(shè)置一個錨點(很形象的理解,漁船出海要停船了,防止漂走,首先要拋錨大笑),怎么設(shè)置錨點,對應(yīng)的元素 id="錨點id",如法一




紅寶書練習(xí)




div1

div2

div3



這種方法的缺點 頁面的URL 會發(fā)生變化  如URL :file:///C:/Users/31295/Desktop/html5實例/紅寶書練習(xí).html#div1,當(dāng)點擊上方,頁面內(nèi)部跳轉(zhuǎn),同時上方URL的標(biāo)紅部分也會發(fā)生變化 (這不是我們想要的)
方法二,在js事件中通過window.location.hash="divId" ,改變# 號后面的 值  但地址也會發(fā)生變化,感覺跟第一種方法沒區(qū)別,甚至更麻煩。
方法三,利用Element.scrollIntoView()方法,讓元素滾動到瀏覽器的窗口可視區(qū)域,先看下方法對應(yīng)的參數(shù)
element.scrollIntoView(align-top);  // Boolean型參數(shù)   element.scrollIntoView()默認參數(shù)true;
element.scrollIntoView(scrollIntoViewOptions);  // Object型參數(shù)
1.Element.scrollIntoView() 等同于 Element.scrollIntoView(true)  也即默認值true,表示元素的頂端和瀏覽器可視區(qū)域的頂端對齊。
2.Element.scrollIntoView(false) 表示元素的底端和瀏覽器可視區(qū)域的底端對齊。
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)到所在錨點,不夠友好,smooth表示平滑過渡到所在錨點。

在react應(yīng)用中,由于url 變化會觸及路由跳轉(zhuǎn),所以第三種方法優(yōu)選,怎么寫呢?
scrollToAnchor = (anchorName) => {
if (anchorName) {
// 找到錨點
let anchorElement = document.getElementById(anchorName);
//如果對應(yīng)的id錨點存在就跳轉(zhuǎn)
if (anchorElement) {
anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'});
}
}



本文標(biāo)題:網(wǎng)站制作中導(dǎo)航欄目在網(wǎng)站內(nèi)部跳轉(zhuǎn)實現(xiàn)方式
文章網(wǎng)址:http://www.rwnh.cn/news30/75480.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項目有網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作
砀山县| 额敏县| 澄迈县| 巴楚县| 莱西市| 苍南县| 资兴市| 如东县| 清远市| 岗巴县| 衡山县| 连平县| 棋牌| 连平县| 磐安县| 宜宾县| 开江县| 泸定县| 灌阳县| 华宁县| 漳浦县| 白河县| 神池县| 湾仔区| 樟树市| 田阳县| 黄大仙区| 西林县| 武宣县| 休宁县| 敦煌市| 泉州市| 剑川县| 海林市| 承德县| 姚安县| 长岭县| 炎陵县| 武冈市| 旬邑县| 绥化市|