HTML | DOM 锚点搜索属性

在 HTML 中，锚点是指通过链接点击跳转到页面内部的特定位置，这可以在一个很长的页面内跳转到指定区域，以便提升用户体验。在 DOM 中，锚点搜索属性可以用来获取或设置锚点相关的属性值，这为开发者提供了便利。

HTMLElement.hash 属性

HTML 元素的 hash 属性返回一个由 '#' 开头的字符串，其代表当前元素的 ID 或名称，并可用作超链接跳转到相应的锚点。例如：

<a href="#section1">进入第一节</a>
<div id="section1">第一节内容</div>

当点击超链接时，页面会自动滚动到 ID 为 'section1' 的元素，这可以通过 hash 属性实现。

在 DOM 中，可以使用 HTMLElement.hash 属性来读取或设置元素的 hash 值。例如：

var div = document.getElementById("section1");
console.log(div.hash); // "#section1"
div.hash = "#section2";
console.log(div.hash); // "#section2"

Window.location.hash 属性

Window 对象的 location 属性用于获取或设置当前页面的 URL，其中包含了 hash 值。例如：

console.log(window.location.href); // "http://example.com/page.html#section1"
console.log(window.location.hash); // "#section1"

在页面滚动时，hash 值也会随之改变。同时，可以使用 window.location.hash 属性来设置新的 hash 值，以便实现页面内部跳转。例如：

window.location.hash = "#section2"; // 跳转到名为 'section2' 的锚点

document.documentElement.scrollTop 属性

在页面滚动时，可以使用 document.documentElement.scrollTop 属性来获取或设置当前页面相对于顶部的垂直偏移量，该属性可用于实现锚点跳转的动画效果。例如：

var div = document.getElementById("section2");
var offset = div.offsetTop;
var duration = 500; // 动画持续时间，单位是毫秒
var startTime = performance.now(); // 开始时间
var from = document.documentElement.scrollTop; // 起始滚动位置
var diff = offset - from; // 滚动距离
var animate = function(timestamp) {
  var elapsed = timestamp - startTime;
  var progress = Math.min(elapsed / duration, 1);
  var scrollTop = from + diff * progress;
  document.documentElement.scrollTop = scrollTop;
  if (progress < 1) {
    requestAnimationFrame(animate);
  }
};
requestAnimationFrame(animate); // 开始动画

上述代码会将页面平滑滚动到名为 'section2' 的锚点处，并在 500 毫秒内完成。可以根据需要自定义动画效果。

以上是 HTML 和 DOM 中锚点搜索属性的介绍，其中包括了 HTMLElement.hash、Window.location.hash 和 document.documentElement.scrollTop 三个属性的详细说明。使用这些属性可以实现页面内部的跳转和动画效果，为用户提供更好的体验。