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>

效果图：

动距离

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性写法:

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

与 document.documentElement 属性不同的是, document.body 属性返回 <body> 元素, document.documentElement 属性返回 <html> 元素。

根节点

有两种特殊的文档属性可用来访问根节点：

document.documentElement chome object HTMLHtmlElement

document.body IE、FF object HTMLBodyElement

第一个属性可返回存在于XML以及HTML文档中的文档根节点(html标记)。

第二个属性是对HTML页面的特殊扩展,提供了对<body>标签的直接访问(body标记)。

窗口尺寸、工作区尺寸

可视区尺寸宽度

document.body.clientWidth IE、FF

document.documentElement.clientWidth chome

兼容性写法：

document.documentElement.clientWidth || document.body.clientWidth;

可视区尺寸高度

document.body.clientHeight IE、FF

document.documentElement.clientHeight chome

兼容性写法：

document.documentElement.clientHeight || document.body.clientHeight;

获取浏览器窗口水平滚动条的位置

document.body.scrollLeft;

document.documentElement.scrollLeft

兼容性写法：

document.documentElement.scrollLeft || document.body.scrollLeft;

获取浏览器窗口垂直滚动条的位置

document.body.scrollTop IE、FF

document.documentElement.scrollTop chrome

兼容性写法：

document.documentElement.scrollTop || document.body.scrollTop;

注意：IE、FF已经支持documentElement对象的各种属性, 而

以上兼容性写法不影响所获的属性值

编写自定义函数：

// 获取浏览器窗口的可视区域的宽度
function getViewPortWidth() {
		return document.documentElement.clientWidth || document.body.clientWidth;
}

// 获取浏览器窗口的可视区域的高度
function getViewPortHeight() {
		return document.documentElement.clientHeight || document.body.clientHeight;
}

// 获取浏览器窗口水平滚动条的位置
function getScrollLeft() {
		return document.documentElement.scrollLeft || document.body.scrollLeft;
}

// 获取浏览器窗口垂直滚动条的位置
function getScrollTop() {
		return document.documentElement.scrollTop || document.body.scrollTop;
}

<!DOCTYPE HTML>声明对JavaScript获取窗口宽度和高度的影响

写CSS的常用套路（下篇）...

点击观看——我写CSS的常用套路（上篇）...

box-shadow

为盒子添加阴影，增加盒子的立体感，可以多层叠加，并且会使阴影更加丝滑

本demo地址：Pagination

内发光

注意到box-shadow还有个inset，用于盒子内部发光

利用这个特性我们可以在盒子内部的某个范围内设定颜色，做出一个新月形

再加点动画和滤镜效果，“猩红之月”闪亮登场！

注意到它散发着淡淡的红光，其实就是2个伪元素应用了模糊滤镜所产生的效果

本demo地址：Crimson Crescent Loading

text-shadow

文本阴影，本质上和box-shadow相同，只不过是相对于文本而言，常用于文本发光，也可通过多层叠加来制作霓虹文本和伪3D文本等效果

发光文本

本demo地址：Staggered GlowIn Text

霓虹文本

本demo地址：Neon Text

伪3D文本

本demo地址：Staggered Bouncing 3D Loading

background-clip:text

能将背景裁剪成文字的前景色，常用来和color: transparent配合生成渐变文本

本demo地址：Menu Hover Fill Text

gradient

渐变可以作为背景图片的一种，具有很强的色彩效果，甚至可以用来模拟光

linear-gradient

线性渐变是笔者最常用的渐变

这个作品用到了HTML的dialog标签，线性渐变背景，动画以及overflow障眼法，细心的你看出来了吗:)

本demo地址：Confirm Modal

radial-gradient

径向渐变常用于生成圆形背景，上面例子中Snow的背景就是一个椭圆形的径向渐变

此外，由于背景可以叠加，我们可以叠加多个不同位置大小的径向渐变来生成圆点群，再加上动画就产生了一种微粒效果，无需多余的div元素

本demo地址：Particle Button

conic-gradient

圆锥渐变可以用于制作饼图

用一个伪元素叠在饼图上面，并将content设为某个值（这个值通过CSS变量计算出来），就能制作出度量计的效果，障眼法又一次完成了它的使命

本demo地址：Gauge (No SVG)

filter

PS里的滤镜，blur最常用

融合效果

当blur滤镜和contrast滤镜一起使用时，会产生一种融合（gooey）的奇特效果

本demo地址：Snow Scratch

backdrop-filter

对背景应用滤镜，产生毛玻璃的效果

本demo地址：Frosted Glass

mix-blend-mode

PS里的混合模式，常用于文本在背景下的特殊效果

以下利用滤色模式（screen）实现文本视频蒙版效果

本demo地址：Video Mask Text

clip-path

PS里的裁切，可以制作各种不规则形状。如果和动画结合也会相当有意思

本demo地址：Name Card Hover Expand

故障效果

由于clip-path有裁切功能，因此可以将多个文字叠在一起，并按比例裁切成多分，再应用交错动画，就能制作出酷炫的故障效果（glitch）。

本demo地址：Cross Bar Glitch Text

mask

PS里的遮罩。所谓遮罩，就是原始图片只显示遮罩图片非透明的部分

镂空效果

虽然clip-path能裁切出形状，但它无法镂空，因为形状的里面它管不着

可能有人（包括我）会用伪元素来“模拟”镂空（通过设置同样的背景色），但这样并非真的镂空，换了个背景或浮在图片上就会暴露出来，这时我们就要求助于遮罩了

假设，你想制作一个空心的圆环，那么你只需将一个径向渐变作为元素的遮罩，并且第一个color-stop设置为透明，其他的color-stop设置为其他颜色即可，因为遮罩的定义就是只显示遮罩图片非透明的部分

注意：为了消除锯齿，这个径向渐变的中间需要有一个额外的color-stop用于缓冲，长度设置为原长度加0.5px即可

本demo地址：Circle Arrow Nav

-webkit-box-reflect

投影效果，不怎么常用，适合立体感强的作品

本demo地址：Card Flip Reflection

web animations

虽然这并不是一个CSS特性，但是它经常用于完成那些CSS所做不到的事情

那么何时用它呢？当CSS动画中有属性无法从CSS中获取时，自然就会使用到它了

跟踪鼠标的位置

目前CSS还尚未有获取鼠标位置的API，因此考虑用JS来进行

通过查阅相关的DOM API，发现在监听鼠标事件的API中，可通过e.clientX和e.clientY来获得鼠标当前的位置

既然能够获取鼠标的位置，那么跟踪鼠标的位置也就不是什么难事了：通过监听mouseenter和mouseleave事件，来获取鼠标出入一个元素时的位置，并用此坐标来当作鼠标的位移距离，监听mousemove事件，来获取鼠标在元素上移动时的位置，同样地用此坐标来当作鼠标的位移距离，这样一个跟踪鼠标的效果就实现了

本demo地址：Menu Hover Image

CSS Houdini

CSS Houdini是CSS的底层API，它使我们能够通过这套接口来扩展CSS的功能

让渐变动起来

目前来说，我们无法直接给渐变添加动画，因为浏览器不理解要改变的值是什么类型

这时，我们就可以利用CSS.registerProperty()来注册我们的自定义变量，并声明其语法类型（syntax）为颜色类型<color>，这样浏览器就能理解并对颜色应用插值方法来进行动画

还记得上文提到的圆锥渐变conic-gradient()吗？既然它可以用来制作饼图，那么我们能不能让饼图动起来呢？答案是肯定的，定义三个变量：--color1、--color2和--pos，其中--pos的语法类型为长度百分比<length-percentage>，将其从0变为100%，饼图就会顺时针旋转出现

利用绝对定位和层叠上下文，我们可以叠加多个从小到大的饼图，再给它们设置不同的颜色，应用交错动画，就有了下面这个炫丽的效果

本demo地址：Mawaru

彩蛋

将交错动画和伪类伪元素结合起来写出来的慎重勇者风格的菜单

本demo地址：Shinchou Menu

在线咨询

上一篇：常见的css3图片hover悬浮效果都在这了，一共15种
下一篇：CSS这些书写规范你知道吗？

您的项目需求

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

整合营销服务商

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

言

一、 纯 html 实现

1. 利用 id 为标记的锚点

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

二、 js 实现

1. 利用 scrollTo()

2. 利用 scrollIntoView()

box-shadow

内发光

text-shadow

发光文本

霓虹文本

伪3D文本

background-clip:text

gradient

linear-gradient

radial-gradient

conic-gradient

filter

融合效果

backdrop-filter

mix-blend-mode

clip-path

故障效果

mask

镂空效果

-webkit-box-reflect

web animations

跟踪鼠标的位置

CSS Houdini

让渐变动起来

彩蛋

您的项目需求

一、纯 html 实现