整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
有時候，我們想閱讀頁面中某段精彩的內容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩 ，很容易讓人失去繼續往下閱讀的興趣。這樣體驗非常不好，所以我們可以想辦法 實現點擊某段文字或者圖片跳轉到頁面指定位置，方便用戶的閱讀。
這里作為錨點的標簽可以是任意元素。
<a href="#aa">跳轉到 id 為 aa 標記的錨點</a>
<p>-------------分隔線-------------</p>
<div id="aa">a</div>
這里作為錨點的標簽只能是 a 標簽。
<a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標簽的錨點</a>
<div id="abb">bbb</div>
注意：當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現（即以 name 為錨點和以 id 為錨點名字相同時），會將后者作為錨點。
window.scrollTo 滾動到文檔中的某個坐標。可提供滑動效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。
話不多說，看下面代碼
「html 部分」:
<a id="linkc">平滑滾動到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">c</div>
「js 部分」:
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;
// 計算該 DOM 節點到 body 頂部距離
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滾動到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。
下面也直接上代碼
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意：此功能某些瀏覽器尚在開發中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。
下面為了方便看效果，把上面的代碼整理在一起。
<!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 為 aa 標記的錨點 a</a>
<p>-------------分隔線-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標簽的錨點</a>
<p>-------------分隔線-------------</p>
<div>bb</div>
<a id="linkc">平滑滾動到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳轉到 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>
效果圖：
年做了大量的 HTML5 項目，遇到了很多坑。在這個過程中學到了一些之前不具備的知識，所以這篇文章就簡單分享一下這方面的話題。
傳統的MPA
首先，說一個比較古老的東西，叫做 MPA。
MPA 的全稱是 Multi-page Application，意思是整個應用（站點）由多個完整的 html 構成。用戶在頁面 1 點擊跳轉，需要向服務端請求頁面 2，請求成功后渲染。而用戶返回時，相當于是點擊了瀏覽器的返回，頁面退回到之前的歷史記錄，并重新加載出來。
在這樣的模式下，頁面間切換慢、不流暢的問題比較突出，尤其是在移動端。
同時，它還產生了幾個小問題：
SPA
隨著對移動端體驗需求的提高以及技術的進步，另一種模式 SPA（Single-page Application）逐漸成為主流。
SPA 簡單來說，就是原來在 MPA 中的多個 html，現在被放在了一個 html 中，并被分成若干個片段。跳轉、返回的本質變成了分段的「隱藏」與「顯示」。跳轉不需要反復對服務端進行請求，從而使得頁面與頁面之間切換更加快速流暢。
在這樣的機制下，跳轉與返回完全由代碼控制，所以可以通過代碼定義頁面轉場的效果、返回。
在設計轉場動畫時，我們需要留意的是導航欄是 Native 的還是 HTML5 的。如果導航欄是 Native 的，那 HTML5 頁面不包括導航欄，它相當于是網頁外的元素，不在轉場效果的設計范圍內。
WebView
說 HTML5 的跳轉，就不得不說 WebView。簡單來說，WebView 是在 App 中用于顯示 web 內容的容器。上文提到的 MPA 和 SPA，都裝在了這個叫做 WebView 的容器中。
用戶點擊頁面中的元素進行跳轉，除了前面的兩種方式外，還有第三種：新打開 WebView 的方式。在這樣的方式下，跳轉的本質是 HTML5「告訴」Native，由 Native 執行打開新 WebView，并在新 WebView 中加載頁面。
因為 Native 的機制，打開新 WebView 的同時，之前的 WebView 會被自然、完整地保留。所以這時，之前的幾個問題就變為：
不過需要注意的地方是，打開新 WebView 是一個資源消耗比較大的操作。如果我們在設計一個流程時，需要比較多的連續使用這種方式，需要和研發同學進行充分的溝通。
比較特殊的Replace
前述的三種跳轉，都會產生歷史記錄。MPA、SPA 的歷史記錄是在 HTML5 中產生，新開 WebView 中的記錄是在 Native 中產生。
在 MPA 或 SPA 中，如果跳轉時使用 Replace 方法，它會用新頁面替換之前的頁面，歷史記錄中沒有之前頁面的記錄。
這是一種特殊的跳轉方式，在設計一些不可逆的流程時可考慮使用。
多頁面回退
了解了上述的幾種機制后，我們來看一個小的應用場景──多頁面回退。
我們在實際業務中，經常會有這樣的需求。假設我們有 1、2、3 三個頁組成的一個流程，在頁面 3 上有個「完成」按鈕點擊回到頁面 1。在不同的交互模式下，實現這樣的跳轉有著不同的機制。
1. SPA模式下的正常跳轉
這種模式是 3 個頁面都在一個 WebView 中。點擊頁面 3 中的「完成」按鈕，回退 -2 ，即回退 2 步歷史記錄，到頁面 1。
2. 新打開WebView
打開新 WebView 又分三種方式。
如果我們把 3 個頁面，拆分到 2 個 WebView 中，如下圖，點擊完成按鈕，即關閉自身所在的 WebView。
同樣是打開新的 WebView，如果我們按如下圖的方法拆分會稍微復雜。這時點擊完成按鈕，首先關閉自身所在的 WebView，當頁面 2「意識」到自己重新被展現時，自動退回 1 步到頁面 1。
每次打開新的 WebView，這時點擊完成，回退的本質是 HTML5「告訴」Native 關閉多個 WebView。需要特別注意的是，HTML5 中實現這種方式不是天然具備的，它需要 Native 具有一次關閉多個 WebView 的能力。所以我們在設計方案時，需要了解清楚自家的 Native 是否有這樣的能力。
總結
以上，簡單說了幾種 HTML5 的跳轉方式。這些跳轉方式，沒有絕對的對與錯，我們在設計方案時，需要根據實際的業務需求與技術的限制，來整體考慮解決方案。
根據個人經驗，也有幾點小帖士分享給大家：
高興鐵鐵們能來看html網頁設計第二期~~~~撒花~~~~~
哎呀呀~實在是抱歉備注標簽我記錯了QAQ
<!--內容打這里-->這個才是備注標簽不是//
首先我們先來學習上節課留下的劇透，分別是:
有人就說了標題標簽上次劇透不就只有h1標簽嗎?
嘿嘿，其實他還有兄弟姐妹啦~
看圖，代碼是從上往下從左往右執行的請記住這個順序哦~
還有,左邊是代碼右邊是網頁上面的效果哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
<body>
<!--標題標簽是h1~h6-->
<h1>1</h1><!--最大-->
<h2>2</h2>
<h3>3</h3>
<h4>4</h4>
<h5>5</h5>
<h6>6</h6><!--最小-->
</body>
</html>
如圖所示，h1標簽是最大的，h6標簽是最小的
是不是很簡單呀,現在已經學會了一個知識點了哦~
源代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--千萬要記住內容是寫在標簽里面的哦~-->
<!--段落標簽是獨占一條的哦-->
<p>第一條p標簽</p>
<p>第二條p標簽</p>
<p>第三條p標簽</p>
</body>
</html>
鏈接標簽是什么?顧名思義就是一個鏈接看代碼：
<a href="https://www.baidu.com">百度</a>
href是什么東西啊？是a標簽的屬性啦~里面用來輸入你需要跳轉到的網頁的鏈接
屬性里面的東西是不會出現在網頁上面的出現的只有在a標簽里面的內容哦
當我點擊百度這兩個字后就給我跳轉到了我們href屬性里面的https://www.baidu.com
當然我們也可以跳轉到我們自己制作的網頁上面但要求是同一個項目下面的網頁
是不是很有趣~
看視頻:
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
視頻中我們點擊鏈接后就跳轉到了山這個網頁出現了一張山的圖片，是不是有點小意思~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="new_file3.html">跳轉到山的網頁</a><!--只有同一個項目下面的網頁才能相互跳轉-->
</body>
</html>
圖像標簽標簽如其意，就是用來上傳圖像的一個標簽~~
我們這里介紹一下img的兩個屬性:
<img src="img/OIP-C.jpg" alt="山"/>
src就是用來放圖片的地址的，他會根據地址去找圖片然后把圖片放到網頁上面。
alt有什么用啊就是當圖片顯示失敗的時候就會顯示alt里面的文字
看視頻:
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
我們把圖片的地址破壞后，就會顯示一個圖片錯誤的圖標和alt里面的內容
怎么拖圖片到img文件下，老師~~~我不知道
看視頻
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
嘿嘿就直接把文件拖進來就ok了是不是很簡單~
okk，好快啊怎么一下就學完了今天的知識點~~~
嘻嘻今天可是有作業的~
請根據下面的網頁仿寫一下:
完成后作業發再評論區哦，有什么不懂的可以留言包回答的。
加油呀，每天學一點爭取做出屬于自己的一個網頁~
上一期
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
