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>

效果图：

年做了大量的 HTML5 项目，遇到了很多坑。在这个过程中学到了一些之前不具备的知识，所以这篇文章就简单分享一下这方面的话题。

传统的MPA

首先，说一个比较古老的东西，叫做 MPA。

MPA 的全称是 Multi-page Application，意思是整个应用（站点）由多个完整的 html 构成。用户在页面 1 点击跳转，需要向服务端请求页面 2，请求成功后渲染。而用户返回时，相当于是点击了浏览器的返回，页面退回到之前的历史记录，并重新加载出来。

在这样的模式下，页面间切换慢、不流畅的问题比较突出，尤其是在移动端。

同时，它还产生了几个小问题：

跳转动画：页面间的跳转无法实现转场动画效果。
如果前一个页比较长，用户滑动到页面比较靠下方的位置后点击，返回时，页面无法默认停留在原位置。
iOS 右滑返回产生问题，从页面 1 跳转到页面 2，再从页面 2 跳转到页面 3，右滑返回，会直接回到页面 1 前的页。

SPA

随着对移动端体验需求的提高以及技术的进步，另一种模式 SPA（Single-page Application）逐渐成为主流。

SPA 简单来说，就是原来在 MPA 中的多个 html，现在被放在了一个 html 中，并被分成若干个片段。跳转、返回的本质变成了分段的「隐藏」与「显示」。跳转不需要反复对服务端进行请求，从而使得页面与页面之间切换更加快速流畅。

在这样的机制下，跳转与返回完全由代码控制，所以可以通过代码定义页面转场的效果、返回。

在设计转场动画时，我们需要留意的是导航栏是 Native 的还是 HTML5 的。如果导航栏是 Native 的，那 HTML5 页面不包括导航栏，它相当于是网页外的元素，不在转场效果的设计范围内。

WebView

说 HTML5 的跳转，就不得不说 WebView。简单来说，WebView 是在 App 中用于显示 web 内容的容器。上文提到的 MPA 和 SPA，都装在了这个叫做 WebView 的容器中。

用户点击页面中的元素进行跳转，除了前面的两种方式外，还有第三种：新打开 WebView 的方式。在这样的方式下，跳转的本质是 HTML5「告诉」Native，由 Native 执行打开新 WebView，并在新 WebView 中加载页面。

因为 Native 的机制，打开新 WebView 的同时，之前的 WebView 会被自然、完整地保留。所以这时，之前的几个问题就变为：

跳转动画：页面间的跳转动画由 WebView 之间的跳转动画来决定。
返回后页面停留在原位置：完美支持。
iOS 右滑返回：完美支持。

不过需要注意的地方是，打开新 WebView 是一个资源消耗比较大的操作。如果我们在设计一个流程时，需要比较多的连续使用这种方式，需要和研发同学进行充分的沟通。

比较特殊的Replace

前述的三种跳转，都会产生历史记录。MPA、SPA 的历史记录是在 HTML5 中产生，新开 WebView 中的记录是在 Native 中产生。

在 MPA 或 SPA 中，如果跳转时使用 Replace 方法，它会用新页面替换之前的页面，历史记录中没有之前页面的记录。

这是一种特殊的跳转方式，在设计一些不可逆的流程时可考虑使用。

多页面回退

了解了上述的几种机制后，我们来看一个小的应用场景──多页面回退。

我们在实际业务中，经常会有这样的需求。假设我们有 1、2、3 三个页组成的一个流程，在页面 3 上有个「完成」按钮点击回到页面 1。在不同的交互模式下，实现这样的跳转有着不同的机制。

1. SPA模式下的正常跳转

这种模式是 3 个页面都在一个 WebView 中。点击页面 3 中的「完成」按钮，回退 -2 ，即回退 2 步历史记录，到页面 1。

2. 新打开WebView

打开新 WebView 又分三种方式。

如果我们把 3 个页面，拆分到 2 个 WebView 中，如下图，点击完成按钮，即关闭自身所在的 WebView。

同样是打开新的 WebView，如果我们按如下图的方法拆分会稍微复杂。这时点击完成按钮，首先关闭自身所在的 WebView，当页面 2「意识」到自己重新被展现时，自动退回 1 步到页面 1。

每次打开新的 WebView，这时点击完成，回退的本质是 HTML5「告诉」Native 关闭多个 WebView。需要特别注意的是，HTML5 中实现这种方式不是天然具备的，它需要 Native 具有一次关闭多个 WebView 的能力。所以我们在设计方案时，需要了解清楚自家的 Native 是否有这样的能力。

总结

以上，简单说了几种 HTML5 的跳转方式。这些跳转方式，没有绝对的对与错，我们在设计方案时，需要根据实际的业务需求与技术的限制，来整体考虑解决方案。

根据个人经验，也有几点小帖士分享给大家：

前后逻辑交织不复杂的单个页面，可以考虑使用新 WebView 打开跳转。
如果是一个任务型的流程，可以考虑将一个任务流包在一个 WebView 中，在任务内使用 SPA 跳转。不同的任务使用不同的 WebView。保持任务之间的关系清晰明了。
设计上需要着重表现页面间转场动画的效果，优先考虑使用 SPA 跳转。
为防止流程过于复杂，尽量不要自定义关闭、返回的行为。保持关闭为默认的关闭行为，保持返回为默认的返回行为。

高兴铁铁们能来看html网页设计第二期~~~~撒花~~~~~

哎呀呀~实在是抱歉备注标签我记错了QAQ

这个才是备注标签不是//

首先我们先来学习上节课留下的剧透，分别是:

1.标题标签h1~h6

有人就说了标题标签上次剧透不就只有h1标签吗?

嘿嘿，其实他还有兄弟姐妹啦~

看图，代码是从上往下从左往右执行的请记住这个顺序哦~

还有,左边是代码右边是网页上面的效果哦~

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>1</h1>

<h2>2</h2>

<h3>3</h3>

<h4>4</h4>

<h5>5</h5>

<h6>6</h6>

</body>

</html>

如图所示，h1标签是最大的，h6标签是最小的

是不是很简单呀,现在已经学会了一个知识点了哦~

2.段落标签 p标签

源代码:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>第一条p标签</p>

<p>第二条p标签</p>

<p>第三条p标签</p>

</body>

</html>

3.链接标签 a标签

链接标签是什么?顾名思义就是一个链接看代码：

href是什么东西啊？是a标签的属性啦~里面用来输入你需要跳转到的网页的链接

属性里面的东西是不会出现在网页上面的出现的只有在a标签里面的内容哦

当我点击百度这两个字后就给我跳转到了我们href属性里面的https://www.baidu.com

当然我们也可以跳转到我们自己制作的网页上面但要求是同一个项目下面的网页

是不是很有趣~

看视频:

视频中我们点击链接后就跳转到了山这个网页出现了一张山的图片，是不是有点小意思~

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="new_file3.html">跳转到山的网页</a>

</body>

</html>

4.图像标签 img标签

图像标签标签如其意，就是用来上传图像的一个标签~~

我们这里介绍一下img的两个属性:

src就是用来放图片的地址的，他会根据地址去找图片然后把图片放到网页上面。

alt有什么用啊就是当图片显示失败的时候就会显示alt里面的文字

看视频:

我们把图片的地址破坏后，就会显示一个图片错误的图标和alt里面的内容

怎么拖图片到img文件下，老师~~~我不知道

看视频

嘿嘿就直接把文件拖进来就ok了是不是很简单~

okk，好快啊怎么一下就学完了今天的知识点~~~

嘻嘻今天可是有作业的~

请根据下面的网页仿写一下:

完成后作业发再评论区哦，有什么不懂的可以留言包回答的。

加油呀，每天学一点争取做出属于自己的一个网页~

上一期

在线咨询

上一篇：那些被 Vue3 废弃的特性（小白必看）
下一篇：史上最全的HTML、CSS知识点总结，浅显易懂适合入门新手

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML跳转到页面指定位置的几种方法

言

一、 纯 html 实现

1. 利用 id 为标记的锚点

2. 利用 a 标签的 name 属性作为锚点

二、 js 实现

1. 利用 scrollTo()

2. 利用 scrollIntoView()

1.标题标签h1~h6

2.段落标签 p标签

3.链接标签 a标签

4.图像标签 img标签

您的项目需求

一、纯 html 实现