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>標簽所建立的元素內容為文件主體。

網頁文件命名

*.htm或*.html
無空格
無特殊符號（例如 &符號），只可以有下劃線“_”,只可以為英文、數字
區分大小寫
首頁文件名默認為：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 語句

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

言

一、 純 html 實現

1. 利用 id 為標記的錨點

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

二、 js 實現

1. 利用 scrollTo()

2. 利用 scrollIntoView()

講大綱：

1、HTML的基本概念

2、HTML發展史

3、HTML的基本結構

4、HTML的編寫方法

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

1、HTML的基本概念

2、HTML發展史

3、HTML的基本結構

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

網頁文件命名

4、HTML的編寫方法

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

您的項目需求

一、純 html 實現