整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML跳轉到頁面指定位置的幾種方法

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

          一、 純 html 實現

          1. 利用 id 為標記的錨點

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

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

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

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

          二、 js 實現

          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 為指定跳轉到該位置的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)
            });
          

          2. 利用 scrollIntoView()

          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>
          

          效果圖:

          講大綱:

          1、HTML的基本概念

          2、HTML發展史

          3、HTML的基本結構

          4、HTML的編寫方法

          5、使用瀏覽器瀏覽HTML網頁


          1、HTML的基本概念

          HTML(Hyper Text Markup Language超文本標識語言)

          • 是一種用來制作超文本文檔的簡單標記語言。
          • 用HTML編寫的超文本文檔成為HTML文檔。

          2、HTML發展史

          HTML發展的5個階段

          1.HTML1.0版本是因為當時有很多不同版本,有些人認為蒂姆·伯納斯·李的版本應該最初版,這個版本沒有IMG元素。

          2.在IETF主持下,1995年11月在瑞士日內瓦舉行的第一次www會議上成立了一個HTML工作小組,它的主要任務是把HTML形式化成為一中SGML DTD,稱之為HTML Level2。

          3.HTML3.0規范是有當時成立的W3C于1995年3月推出,提供了很多新的特性,例如表格,文字繞排,和復雜數學元素顯示,雖然它是設計用來兼容2.0版本的,但是實現這個標準的工作在當時過于復雜,在草案于1995年過期時,標準開發業因為缺乏瀏覽器支持而終止了。3.1版本從未被正式提出,而下一個被提出的版本是HTML3.2,去掉了大部分3.0中的新特性,但是加入了很多特定瀏覽器。

          4.HTML4.0同樣也加入了很多特定瀏覽器的元素和屬性,但是同時也開始“清理”這個標準,把一些元素和屬性標記為過時的,建議不再使用它們。HTML的未來和CSS結合會很好。

          5.HTML5目前仍為草案,并已經被W3C認可。


          3、HTML的基本結構


          主體部分包含文本、圖像和鏈接。它包括在<BODY>...</BODY>標簽內

          頭部部分包含標題和其他說明信息。包括在<HEAD>...</HEAD>標簽內


          4.HTML文件的標簽與元素介紹

          一個HTML文件是由一系列的元素標簽組成的

          • 元素是HTML文件的重要主持部分,例如title(文件標題)、img(圖像)、及table(表格)等。元素名不區分大小寫。
          • HTML用標簽來規定元素的屬性和它在文件中的位置

          HTML標簽的介紹

          HTML的標簽分為單獨出現的標簽和成對出現的標簽兩種

          • 成對標簽僅對包含在其中的文件部分發生作用,例如<title>和</title>標簽用于界定標題元素的范圍,也就是說,<title>和</title>標簽之間的部分是此HTML文件的標題。
          • 單獨標簽的格式未<元素名稱>,其作用是在相應的位置插入元素,例如<br>標簽便是在該標簽所在的位置插入一個換行符。

          說明:在每個HTML標簽,大、小寫混寫均可

          例如<HTML>、<html>和<Html>,其結果都是一樣的。

          HTML元素介紹

          • 概念

          當用一組HTML標簽將一段文字包含在中間時,這段文字與包含文字的HTML標簽被稱之為一個元素

          • 應用

          在所有HTML文件,最外層的元素是有<html>標簽建立的。在<html>標簽所建立的元素中,包含了練個主要的子元素,這兩個子元素是由<head>標簽與<body>標簽所建立的。<head>標簽所建立的元素內容為 文件標題,而<body>標簽所建立的元素內容為文件主體。


          網頁文件命名

          1. *.htm或*.html
          2. 無空格
          3. 無特殊符號(例如 &符號),只可以有下劃線“_”,只可以為英文、數字
          4. 區分大小寫
          5. 首頁文件名默認為:index.htm或index.html

          4、HTML的編寫方法

          1.手工直接編寫

          記事本等,存成.htm或.html格式

          2.使用可視化HTML編輯器

          Frontpage、Dreamweaver等

          3.有web服務器(或稱http服務器)一方實時動態地生成。

          演示用記事本創建網頁:

          5.保存為index.html文檔,用瀏覽器打開如下

          標位置

          當我們給某一個盒子添加鼠標事件監聽時(click、mouseover、mouseenter、mouseout等事件), 都一定會有以下四組值:

          event.pageX event.pageY

          event.screenX event.screenY

          event.clientX event.clientY

          event.offsetX event.offsetY

          event.pageY 表示鼠標指針, 到頁面頂端的距離。IE6、7、8不兼容

          event.screenY 表示鼠標指針, 到屏幕頂端的距離

          event.clientY 表示鼠標指針, 到視口頂端的距離(視口就是當前可視窗口)

          event.offsetY 表示鼠標指針, 到盒子頂端的距離

          規律:

          1、當頁面沒有卷動的時候, pageY一定等價于clientY。或換句話說pageY等價于clientY+頁面卷動的值scrollTop。

          2、IE678不兼容pageX、pageY

          offsetX/Y指的不是距離你監聽的那個盒子左上角的距離, 而是指的你現在鼠標指針所在位置到此時最內層盒子左上角的距離。

          getBoundingClientRect 用于獲取某個元素相對于視窗的位置集合。集合中有top, right, bottom, left等屬性。

          event.getBoundingClientRect().left;

          具體區別:

          event.pageX event.pageY

          event.screenX event.screenY

          event.clientX event.clientY

          event.offsetX event.offsetY

          圖解: https://www.cnblogs.com/Abner5/p/5855274.html?utm_source=itdadao&utm_medium=referral

          event.getBoundingClientRect()

          圖解: https://www.cnblogs.com/Songyc/p/4458570.html

          實例: 鼠標點擊特效

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          /*cursor: none;*/
          }
          img{
          width: 100px;
          position: absolute;
          left: 0;
          top: 0;
          
          }
          </style>
          
          </head>
          <body>
          <script type="text/javascript">
          var body = document.getElementsByTagName("body")[0];
          //如果想點擊body那么body必須設置寬高
          document.onclick = function(e){
          var ev = e || window.event;//事件對象的兼容
          
          var left = ev.clientX;
          var top = ev.clientY;
          
          var img = document.createElement("img");
          img.setAttribute("src","img/eagle.png");
          img.style.left = left + "px";
          img.style.top = top + "px";
          
          body.appendChild(img);
          
          //因為拖拽圖片圖片有一種神奇的魔力 也就是我們所有的默認行為
          if(ev.preventDefault){
          ev.preventDefault();
          }else{
          ev.returnValue = false;
          }
          }
          </script>
          </body>
          </html>

          盒子位置

          任何一個元素都有offsetParent屬性和offsetLeft、offsetTop屬性

          對象.offsetParent獲得定位祖先元素, 一層一層往上找, 如果不存在就是body和絕對定位類似

          對象.offsetLeft獲取到定位父元素距離左邊的值, 一層一層往上找, 如果不存在就是body

          對象.offsetTop獲取到定位父元素距離上邊的值, 一層一層往上找, 如果不存在就是body

          offsetWidth 盒子的寬度

          offsetHeight 盒子的高度

          document.documentElement.clientWidth 文檔的寬度

          document.documentElement.clientHeight 文檔的高度

          //可視區域寬高

          //console.log(document.body.clientWidth);//個別瀏覽器

          //console.log(document.documentElement.clientWidth);//高版本

          var w = document.documentElement.clientWidth || document.body.clientWidth;

          var h = document.documentElement.clientHeight || document.body.clientHeight;

          實例1:獲取行內樣式的寬度和高度

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          }
          div{
          width: 600px;
          height: 300px;
          background-color: red;
          }
          </style>
          
          </head>
          <body>
          <div></div>
          <script type="text/javascript">
          var div = document.getElementsByTagName("div")[0];
          console.log(div.style.width);//操作的都是行內
          
          //不兼容
          //高版本
          console.log(window.getComputedStyle(div).width)
          //低版本
          console.log(div.currentStyle.width)
          </script>
          </body>
          </html>
          實例2: 獲取盒子的寬度和高度
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          }
          div{
          width: 600px;
          height: 300px;
          background-color: red;
          }
          </style>
          
          </head>
          <body>
          <div></div>
          <script type="text/javascript">
          var div = document.getElementsByTagName("div")[0];
          
          //盒子寬高 number類型
          console.log(div.offsetWidth)
          console.log(div.offsetHeight)
          
          </script>
          </body>
          </html>

          實例3: 獲取盒子的位置

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          }
          div{
          width: 600px;
          height: 300px;
          background-color: red;
          margin: 50px;
          padding: 50px;
          position: relative;
          }
          span{
          width: 100px;
          height: 100px;
          display: block;
          background-color: orange;
          }
          </style>
          
          </head>
          <body>
          <div>
          <span></span>
          </div>
          <script type="text/javascript">
          var div = document.getElementsByTagName("div")[0];
          var span = document.getElementsByTagName("span")[0];
          
          //盒子距離定位父元素(div)的位置
          console.log(span.offsetLeft)
          console.log(span.offsetTop)
          
          </script>
          </body>
          </html>

          實例4: 獲取盒子的凈位置

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          }
          div{
          width: 600px;
          height: 300px;
          background-color: red;
          margin: 50px;
          padding: 50px;
          position: relative;
          }
          span{
          width: 500px;
          height: 88px;
          display: block;
          background-color: orange;
          }
          </style>
          
          </head>
          <body>
          <div>
          <span></span>
          </div>
          <script type="text/javascript">
          var div = document.getElementsByTagName("div")[0];
          var span = document.getElementsByTagName("span")[0];
          
          //我們在懶加載的時候就用到過凈位置
          //http://jquery.cuishifeng.cn/offset.html
          
          //凈位置就是盒子到body的位置
          //console.log(span.offsetTop)
          console.log(span.offsetParent);//定位復原素(div)
          
          //他返回一個信息集合
          console.log(span.getBoundingClientRect());//這個東西就可以得到span的所有位置關系
          
          //top和left值就是我們所需要的凈位置
          //我們知道我們無法直接獲取該盒子到body的位置 但是我們我們可以獲取該合資距離他有定位祖先元素的位置 那么這樣我們就可以一層一層網上找
          /*body
          div(定位)
          span
          
          span.offsetTop ->sapn.offsetParent
          div.offsetTop*/
          </script>
          </body>
          </html>

          實例5 編寫凈位置函數

          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          }
          div{
          width: 600px;
          height: 300px;
          background-color: red;
          margin: 50px;
          padding: 50px;
          /*position: relative;*/
          }
          span{
          width: 500px;
          height: 88px;
          display: block;
          background-color: orange;
          }
          </style>
          </head>
          <body>
          <div>
          <span></span>
          </div>
          <script type="text/javascript">
          var div = document.getElementsByTagName("div")[0];
          var span = document.getElementsByTagName("span")[0];
          
          //方法一: 編寫自定義函數
          console.log(pos(span)); //100
          
          function pos(obj){
          //用一個變量存儲盒子到頁面的初始值
          var left = obj.offsetLeft;
          //因為定位父盒子不確定 所以用一個變量臨時存儲 后面替換
          var par = obj.offsetParent;
          while(par){
          left += par.offsetLeft;
          par = par.offsetParent;
          }
          return left;
          }
          
          //方法二: getBoundingClientRect里面包含了到頁面的left top值
          console.log(span.getBoundingClientRect().left) //100
          </script>
          </body>
          </html>

          拖拽三大事件

          鼠標按下onmousedown

          鼠標移動onmousemove

          鼠標抬起onmouseup

          實例: 鼠標拖拽

          <!DOCTYPE html>
          <html lang="zh">
          <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Document</title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          }
          div{
          width: 200px;
          height: 200px;
          cursor: move;
          background-color: orange;
          /*元素如果可以拖拽他必定是定位元素*/
          position: absolute;
          left: 0;
          top: 0;
          }
          </style>
          </head>
          <body>
          <div>
          今天我們學習了拖拽 感覺老是講的就是一坨翔
          </div>
          
          <p>onmouseup</p>
          <script type="text/javascript">
          //拖拽三大事件
          //鼠標按下onmousedown
          //鼠標移動onmousemove
          //鼠標抬起onmouseup
          
          //獲取元素
          var div = document.getElementsByTagName("div")[0];
          
          div.onmousedown = function(e){
          var ev = e || window.event;
          //我按下時把鼠標到盒子的位置求出來
          var startX = ev.offsetX;
          var startY = ev.offsetY;
          //div.onmousemove = function(e){//因為我們向左上角移動那么盒子就不跟著我跑了
          document.onmousemove = function(e){
          var ev = e || window.event;
          //你移動鼠標那么盒子跟著你跑
          console.log(ev.clientX,ev.offsetX)
          
          console.log(ev.clientX - ev.offsetX)
          console.log(ev.clientY - ev.offsetY)
          
          
          //鼠標移動的位置就是鼠標到可視區的位置-一開始鼠標按下的位置
          div.style.left = ev.clientX - startX + "px";
          div.style.top = ev.clientY - startY + "px";
          
          
          //div.style.left = ev.clientX + "px";
          //div.style.top = ev.clientY + "px";
          }
          //我們習慣把抬起也放入按下里面
          document.onmouseup = function(){
          document.onmousemove = null;//我抬起鼠標之后不想讓他再跟著我跑了
          //所以就直接解除綁定
          document.onmouseup = null;
          }
          
          
          //如果拖拽圖片或者文字那么此時拖拽失效 所以我們需要清除默認行為
          /*if(ev.preventDefault){
          ev.preventDefault()
          }else{
          ev.returnValue = false;
          }*/
          return false;//如果使用它必須放到最后
          }
          
          
          
          
          
          
          //基本上很完美了
          </script>
          </body>
          </html>
          實例: 鼠標拖拽--防止拖出頁面
          <!DOCTYPE html>
          <html lang="zh">
          <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Document</title>
          <style type="text/css">
          *{
          margin: 0;
          padding: 0;
          }
          div{
          width: 200px;
          height: 200px;
          cursor: move;
          background-color: orange;
          /*元素如果可以拖拽他必定是定位元素*/
          position: absolute;
          left: 0;
          top: 0;
          }
          </style>
          </head>
          <body>
          <div>
          今天我們學習了拖拽 感覺老是講的就是一坨翔
          </div>
          
          <p>onmouseup</p>
          <script type="text/javascript">
          //拖拽三大事件
          //鼠標按下onmousedown
          //鼠標移動onmousemove
          //鼠標抬起onmouseup
          
          //獲取元素
          var div = document.getElementsByTagName("div")[0];
          
          div.onmousedown = function(e){
          var ev = e || window.event;
          //我按下時把鼠標到盒子(div)的位置求出來
          var startX = ev.offsetX;
          var startY = ev.offsetY;
          //div.onmousemove = function(e){//因為我們向左上角移動那么盒子就不跟著我跑了
          document.onmousemove = function(e){
          var ev = e || window.event;
          //你移動鼠標那么盒子跟著你跑
          console.log(ev.clientX,ev.offsetX)
          
          console.log(ev.clientX - ev.offsetX)
          console.log(ev.clientY - ev.offsetY)
          
          var lDis = ev.clientX - startX;
          var rDis = ev.clientY - startY;
          
          if(rDis < 0){
          rDis = 0;
          }
          if(lDis < 0){
          lDis = 0;
          }
          
          if(lDis > document.documentElement.clientWidth-div.offsetWidth){
          lDis = document.documentElement.clientWidth-div.offsetWidth;
          }
          
          if(rDis > document.documentElement.clientHeight-div.offsetHeight){
          rDis = document.documentElement.clientHeight-div.offsetHeight;
          }
          
          //鼠標移動的位置就是鼠標到可視區的位置-一開始鼠標按下的位置
          div.style.left = lDis + "px";
          div.style.top = rDis + "px";
          
          
          //div.style.left = ev.clientX + "px";
          //div.style.top = ev.clientY + "px";
          }
          //我們習慣把抬起也放入按下里面
          document.onmouseup = function(){
          document.onmousemove = null;//我抬起鼠標之后不想讓他再跟著我跑了
          //所以就直接解除綁定
          document.onmouseup = null;
          }
          
          
          //如果拖拽圖片或者文字那么此時拖拽失效 所以我們需要清除默認行為
          /*if(ev.preventDefault){
          ev.preventDefault()
          }else{
          ev.returnValue = false;
          }*/
          return false;//如果使用它必須放到最后
          }
          
          //基本上很完美了
          </script>
          </body>
          </html>

          特別注意:

          因為圖片、文字選中是也會被拖拽, 這是一種默認行為, 所以在鼠標按下時, 我們需要清除這種默認行為。


          上一篇:HTML5 Video(視頻)
          下一篇:JavaScript 語句
          主站蜘蛛池模板: 中文字幕无线码一区二区 | 国产天堂在线一区二区三区| 伊人久久精品一区二区三区| 国模丽丽啪啪一区二区| 国产精品一区二区资源| 日本在线视频一区二区| 一区二区三区四区免费视频| 亚洲国产综合无码一区二区二三区 | 国产午夜精品一区理论片| 一区国产传媒国产精品| 精品无码av一区二区三区| 中文字幕一区二区三区在线不卡 | 亚洲一区二区三区首页| 中文字幕永久一区二区三区在线观看| 国产高清不卡一区二区| 99国产精品一区二区| 日韩人妻无码一区二区三区综合部| 国产一区二区不卡老阿姨| 亚洲第一区视频在线观看| 蜜臀AV在线播放一区二区三区| 国产午夜精品一区二区| 日韩精品无码一区二区三区四区 | 波霸影院一区二区| 欧洲精品一区二区三区在线观看 | 国产精品一区二区三区99| jazzjazz国产精品一区二区| 国产91一区二区在线播放不卡| 亚洲国产精品无码第一区二区三区| 色窝窝无码一区二区三区成人网站| 国产在线观看一区精品| 国产在线观看一区二区三区精品| 日本在线观看一区二区三区| 国产AV国片精品一区二区| 国产一区二区精品久久凹凸| 亚洲熟女少妇一区二区| 日产精品久久久一区二区| 亚洲熟妇AV一区二区三区宅男| 日韩一区二区a片免费观看| 精品一区二区三区视频| 亚洲乱码日产一区三区| 中日韩精品无码一区二区三区|