JS实现页面锚点跳转与平滑滚动详解

本文介绍如何使用JavaScript实现页面快速定位，解决常见的锚点跳转问题。

锚点跳转基础与HTML实现

1. 锚点跳转简介

锚点是用于将页面定位到特定位置的标记，在长页面中应用广泛。

锚点跳转主要有两种实现方式：

• a标签结合name或href属性
• 利用标签的id属性

在HTML 4.0标准之前，仅能通过<a>标签的name属性创建片段标识符。id属性的引入使得所有HTML或XHTML元素均可作为片段标识符。由于id几乎适用于所有标签，<a>标签为保持向后兼容保留了name属性，同时支持id属性。两者可互换使用，id可视为name的升级形式。结合href属性，<a>标签即可同时充当超链接和片段标识符。

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a>
<a href="#f" rel="external nofollow" ></a>

然而，使用空标签的方法存在锚点失效的风险，因此建议采用id属性绑定锚点。相关代码如下：

<a href="#he" rel="external nofollow" rel="external nofollow" >波轮洗衣机介绍</a><h2 id="#de">波轮洗衣机介绍</h2>

URL中锚点机制与hash属性

2. 含锚点跳转的URL地址结构

window.location.hash

【1】关于#符号的含义

在网页制作中，“#”符号具有通用性，通常表示id选择符。在URL中，#同样被视为id选择符，指示页面跳转至指向该id标签的位置。例如访问地址https://www.jb51.net/view/121414.htm?pf=1#3。

该URL末尾的'#'告知浏览器执行跳转操作，#后的数字3表示在https://www.jb51.net/view/121416.htm?pf=1页面中查找符合#3特征的标签并执行跳转。

【2】关于空锚点指向的处理

若URL中#后的字符id在页面中不存在，会出现两种情况：若在当前页面，仅URL地址变化，页面不跳转；若从其他页面跳转而来，页面将显示在顶部，此时'#'符号实际上未起到定位作用。

【3】window.location.hash属性

该属性用于获取或设置页面的标签值。例如：https://www.jb51.net/article/22656.htm?dasdsa。

平滑滚动实现：jQuery与原生JS

3. jQuery实现锚点平滑跳转

若需让页面平滑滚动至id为box的元素处，jQuery代码仅需一行，关键代码如下：

$('html, body').animate({scrollTop: $('#box').offset().top}, 1000)

原生JS实现方案

scrollTo()方法可将内容滚动至指定的坐标位置。

scrollTo(xpos,ypos);

IE兼容性与刷新失效处理

4. IE浏览器下锚点刷新失效及jQuery解决方案

【1】关于锚点刷新失效现象

锚点刷新失效指按下F5刷新键时，即使URL包含锚点，该锚点也不起作用。

【2】jQuery解决方案

在jQuery中实现较为简单。可通过解析URL获取锚点，进而获取对应锚点对象，使页面滚动高度等于其距离页面顶部的偏移值。这样无论页面重新载入还是刷新，后方的锚点均能生效。

$(function() {
  var url = window.location.toString();
  var id = url.split('#')[1];
  if (id) {
    var t = $('#' + id).offset().top;
    $(window).scrollTop(t);
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。