整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
有時候，我們想閱讀頁面中某段精彩的內容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩 ，很容易讓人失去繼續往下閱讀的興趣。這樣體驗非常不好，所以我們可以想辦法 實現點擊某段文字或者圖片跳轉到頁面指定位置，方便用戶的閱讀。
這里作為錨點的標簽可以是任意元素。
<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>
效果圖：
信
51rgb
網頁自動跳轉頁面的代碼在很多時候都非常的有用，下面的是兩個簡單的例子。僅供參考。
方案一，用<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網頁自動跳轉代碼--西農大網站</title>
</head>
<body>
測試：html網頁自動跳轉代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農林科技大學是一所985、211院校。<br />
</body></html>
方案二，用javascript腳本來跳轉
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>正在進入西農大網站</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網頁自動跳轉代碼<br/>
你可以在這里寫下你想的一切東西！<br />
如：西北農林科技大學是一所985、211院校。<br /><br />
如果您的瀏覽器不支持跳轉,<astyle="text-decoration: none" ><font color="#FF0000">請點這里</font></a>.</p>
</body>
</html>
↓↓↓
多網頁都加入了一個雞賊的操作——「打開 App 閱讀全文」。
明明可以一次性把內容展示出來，非得給你隱藏一半，剩下一半需要下載 App 才能看。
要不是隔著一條網線，這種話說到一半的人，真的，應該拖出去揍一頓。
不過好在有關部門已經開始行動了：高度重視，敦促相關企業進行整改。
話音剛落，確實已經有一些網頁進行了優化，看新聞查資料什么的順暢多了。
但是吼，不排除某些廠商比較頑固，不愿意放棄這塊蛋糕，想方設法讓用戶下載 App。
之前說到這個問題的時候，也有不少小伙伴表示需要一些解決方案。
作為一個有求必應的數碼博主，這就給大伙支兩招。
Safari 擴展
如果你是 iPhone 用戶，那這個問題就太好解決了。
因為在 iOS 15 中，蘋果已經為內置瀏覽器 Safari 加入了擴展功能。
通過這些擴展，我們可以實現很多瀏覽器本身不支持的操作，解決展開全文問題可謂信手拈來。
目前，應用商店已經有很多擴展都可以實現這個功能，比如「攔截 100」。
操作步驟非常簡單，看好了。
第一步：在 APP Store 搜索「攔截 100」，安裝。
第二步：在系統設置里找到「Safari 瀏覽器」，然后點擊「擴展」，開啟「攔截 100」并「允許所有網站」。
這樣就算設置好啦。
效果看下圖：同一個網頁，左邊是關閉擴展，右邊是打開擴展。
網頁瀏覽瞬間香了起來有木有！
而且吼，「攔截 100」的三個核心功能是免費的：自動展開全文、攔截跳轉 App、去除網頁 App 橫幅廣告。
（免費使用）
如果你愿意氪金，還可以解鎖腳本、深度去廣告等功能，大家根據自己的需求來就好。
（15 元一年，30 元買斷，其實也不算很貴）
除了「攔截 100」，App Store 還有很多擴展都已經支持自動展開全文，大家可以挑一個自己喜歡的。
對了，想瀏覽所有 Safari 擴展，可以從 App Store 中的「App」-「熱門類別」-「Safari 瀏覽器擴展」進入哦~
安卓這邊，目前還沒有主流的瀏覽器支持擴展插件。
畢竟系統層面還不支持，所以很難形成氣候。
但是，咱們也可以通過一些小眾瀏覽器的腳本功能，實現類似操作，比如 Via 瀏覽器。
瀏覽器腳本
與很多主流瀏覽器不同，Via 瀏覽器內置了腳本功能，可以借助 JavaScript 代碼實現擴展操作。
但問題來了，這玩意咱也不會寫呀，怎么辦呢？
高手在民間，一些開發者自發地貢獻了腳本，甚至還做了網站，實現一鍵安裝。
用戶唯一需要做的，就是點擊安裝。
看下效果，左側是安裝前，一打開網頁就提示跳轉；右側是安裝后，無需點擊即可拉到結尾。
不過，由于這些瀏覽器和腳本都比較小眾，也缺乏有組織的維護，So...可能出現覆蓋不全、失效等情況。
比如說在百度經驗自動展開全文時，就遇到了顯示 Bug，正文還沒完就直接顯示廣告了。
不管怎么說，這些方法都只能從表面上解決問題。
想要完全杜絕，依舊得看這些互聯網大廠。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
