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 实现