整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML跳轉(zhuǎn)到頁面指定位置的幾種方法

          有時候,我們想閱讀頁面中某段精彩的內(nèi)容,但由于頁面太長,用戶需要自己滾動頁面,查找起來非常麻煩 ,很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗非常不好,所以我們可以想辦法 實現(xiàn)點擊某段文字或者圖片跳轉(zhuǎn)到頁面指定位置,方便用戶的閱讀。

          一、 純 html 實現(xiàn)

          1. 利用 id 為標記的錨點

          這里作為錨點的標簽可以是任意元素。

            <a href="#aa">跳轉(zhuǎn)到 id 為 aa 標記的錨點</a>
            <p>-------------分隔線-------------</p>
            <div id="aa">a</div>
          

          2. 利用 a 標簽的 name 屬性作為錨點

          這里作為錨點的標簽只能是 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 為錨點名字相同時),會將后者作為錨點。

          二、 js 實現(xiàn)

          1. 利用 scrollTo()

          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)
            });
          

          2. 利用 scrollIntoView()

          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)大廠。


          主站蜘蛛池模板: 久久精品无码一区二区三区不卡 | 日本在线电影一区二区三区 | 精品国产精品久久一区免费式| 日韩精品无码一区二区三区免费 | 无码日韩人妻AV一区二区三区| 亚洲综合无码一区二区| 亚洲日韩精品一区二区三区| 日韩一区二区精品观看| 亚洲va乱码一区二区三区| 无码国产精成人午夜视频一区二区| 一区二区三区美女视频| 无码一区二区三区AV免费| 夜夜添无码试看一区二区三区| 无码精品久久一区二区三区 | 亚洲第一区视频在线观看| 亚洲日韩一区精品射精| 亚洲一区二区三区久久久久| 国产成人午夜精品一区二区三区| 免费视频精品一区二区| 日本精品视频一区二区| 日本一区二区在线| 国产伦精品一区二区三区视频小说| 无码aⅴ精品一区二区三区| 国产av一区最新精品| 老熟妇高潮一区二区三区| jizz免费一区二区三区| 一区二区三区日韩精品| 3d动漫精品啪啪一区二区中| 男女久久久国产一区二区三区| 亚洲日韩中文字幕一区| 国产成人精品一区二区三区| 国产亚洲无线码一区二区| 亚洲日韩精品国产一区二区三区| 亚洲av色香蕉一区二区三区蜜桃| 日本免费电影一区| 中文无码一区二区不卡αv| 中日韩精品无码一区二区三区| 大香伊人久久精品一区二区 | 精品视频一区二区| 无码视频一区二区三区在线观看| 国产精品一区二区综合|