整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
有時候，我們想閱讀頁面中某段精彩的內(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)系。
