有時候,我們想閱讀頁面中某段精彩的內(nèi)容,但由于頁面太長,用戶需要自己滾動頁面,查找起來非常麻煩 ,很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗非常不好,所以我們可以想辦法 實現(xiàn)點擊某段文字或者圖片跳轉(zhuǎn)到頁面指定位置,方便用戶的閱讀。
這里作為錨點的標簽可以是任意元素。
<a href="#aa">跳轉(zhuǎn)到 id 為 aa 標記的錨點</a>
<p>-------------分隔線-------------</p>
<div id="aa">a</div>
這里作為錨點的標簽只能是 a 標簽。
<a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標簽的錨點</a>
<div id="abb">bbb</div>
注意:當(dāng)以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現(xiàn)(即以 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 為指定跳轉(zhuǎn)到該位置的DOM節(jié)點
let bridge = toEl;
let body = document.body;
let height = 0;
// 計算該 DOM 節(jié)點到 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() 方法讓當(dāng)前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。
下面也直接上代碼
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意:此功能某些瀏覽器尚在開發(fā)中,請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應(yīng)的標準文檔可能被重新修訂,所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。
下面為了方便看效果,把上面的代碼整理在一起。
<!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">跳轉(zhuǎn)到以 id 為 aa 標記的錨點 a</a>
<p>-------------分隔線-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳轉(zhuǎn)到 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 跳轉(zhuǎn)到 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為指定跳轉(zhuǎn)到該位置的DOM節(jié)點
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>
效果圖:
信
51rgb
網(wǎng)頁自動跳轉(zhuǎn)頁面的代碼在很多時候都非常的有用,下面的是兩個簡單的例子。僅供參考。
方案一,用<meta>里直接寫刷新語句:
<html>
<head>
<meta http-equiv="Content-Language" content="zh-CN">
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312">
<meta http-equiv="refresh" content="5;url=http://www.51rgb.com">
<title>html網(wǎng)頁自動跳轉(zhuǎn)代碼--西農(nóng)大網(wǎng)站</title>
</head>
<body>
測試:html網(wǎng)頁自動跳轉(zhuǎn)代碼<br/>
你可以在這里寫下你想的一切東西!<br />
如:西北農(nóng)林科技大學(xué)是一所985、211院校。<br />
</body></html>
方案二,用javascript腳本來跳轉(zhuǎn)
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在進入西農(nóng)大網(wǎng)站</title>
</head>
<body>
<form name=loading>
<p align=center> <font color="#0066ff" size="2">正在進入,請稍等</font><font color="#0066ff" size="2" face="Arial">...</font>
<input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#0066ff; background-color:#fef4d9; padding:0px; border-style:none;">
<inputtype=text name=percent size=47 style="color:#0066ff; text-align:center; border-width:medium; border-style:none;">
<script>
var bar=0
var line="||"
var amount="||"
count
function count{
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
{setTimeout("count",100);}
else
{window.location =http://www.51rgb.com;}
}</script>
</p>
</form><p align="center">
測試:html網(wǎng)頁自動跳轉(zhuǎn)代碼<br/>
你可以在這里寫下你想的一切東西!<br />
如:西北農(nóng)林科技大學(xué)是一所985、211院校。<br /><br />
如果您的瀏覽器不支持跳轉(zhuǎn),<astyle="text-decoration: none" ><font color="#FF0000">請點這里</font></a>.</p>
</body>
</html>
↓↓↓
多網(wǎng)頁都加入了一個雞賊的操作——「打開 App 閱讀全文」。
明明可以一次性把內(nèi)容展示出來,非得給你隱藏一半,剩下一半需要下載 App 才能看。
要不是隔著一條網(wǎng)線,這種話說到一半的人,真的,應(yīng)該拖出去揍一頓。
不過好在有關(guān)部門已經(jīng)開始行動了:高度重視,敦促相關(guān)企業(yè)進行整改。
話音剛落,確實已經(jīng)有一些網(wǎng)頁進行了優(yōu)化,看新聞查資料什么的順暢多了。
但是吼,不排除某些廠商比較頑固,不愿意放棄這塊蛋糕,想方設(shè)法讓用戶下載 App。
之前說到這個問題的時候,也有不少小伙伴表示需要一些解決方案。
作為一個有求必應(yīng)的數(shù)碼博主,這就給大伙支兩招。
Safari 擴展
如果你是 iPhone 用戶,那這個問題就太好解決了。
因為在 iOS 15 中,蘋果已經(jīng)為內(nèi)置瀏覽器 Safari 加入了擴展功能。
通過這些擴展,我們可以實現(xiàn)很多瀏覽器本身不支持的操作,解決展開全文問題可謂信手拈來。
目前,應(yīng)用商店已經(jīng)有很多擴展都可以實現(xiàn)這個功能,比如「攔截 100」。
操作步驟非常簡單,看好了。
第一步:在 APP Store 搜索「攔截 100」,安裝。
第二步:在系統(tǒng)設(shè)置里找到「Safari 瀏覽器」,然后點擊「擴展」,開啟「攔截 100」并「允許所有網(wǎng)站」。
這樣就算設(shè)置好啦。
效果看下圖:同一個網(wǎng)頁,左邊是關(guān)閉擴展,右邊是打開擴展。
網(wǎng)頁瀏覽瞬間香了起來有木有!
而且吼,「攔截 100」的三個核心功能是免費的:自動展開全文、攔截跳轉(zhuǎn) App、去除網(wǎng)頁 App 橫幅廣告。
(免費使用)
如果你愿意氪金,還可以解鎖腳本、深度去廣告等功能,大家根據(jù)自己的需求來就好。
(15 元一年,30 元買斷,其實也不算很貴)
除了「攔截 100」,App Store 還有很多擴展都已經(jīng)支持自動展開全文,大家可以挑一個自己喜歡的。
對了,想瀏覽所有 Safari 擴展,可以從 App Store 中的「App」-「熱門類別」-「Safari 瀏覽器擴展」進入哦~
安卓這邊,目前還沒有主流的瀏覽器支持擴展插件。
畢竟系統(tǒng)層面還不支持,所以很難形成氣候。
但是,咱們也可以通過一些小眾瀏覽器的腳本功能,實現(xiàn)類似操作,比如 Via 瀏覽器。
瀏覽器腳本
與很多主流瀏覽器不同,Via 瀏覽器內(nèi)置了腳本功能,可以借助 JavaScript 代碼實現(xiàn)擴展操作。
但問題來了,這玩意咱也不會寫呀,怎么辦呢?
高手在民間,一些開發(fā)者自發(fā)地貢獻了腳本,甚至還做了網(wǎng)站,實現(xiàn)一鍵安裝。
用戶唯一需要做的,就是點擊安裝。
看下效果,左側(cè)是安裝前,一打開網(wǎng)頁就提示跳轉(zhuǎn);右側(cè)是安裝后,無需點擊即可拉到結(jié)尾。
不過,由于這些瀏覽器和腳本都比較小眾,也缺乏有組織的維護,So...可能出現(xiàn)覆蓋不全、失效等情況。
比如說在百度經(jīng)驗自動展開全文時,就遇到了顯示 Bug,正文還沒完就直接顯示廣告了。
不管怎么說,這些方法都只能從表面上解決問題。
想要完全杜絕,依舊得看這些互聯(lián)網(wǎng)大廠。
*請認真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。