基于文字的URL锚点定位与::target-text样式设置

实力
656 阅读3分钟

在网页设计中，锚点是用来跳转到页面内部某个位置的一种常见方式。我们可以通过HTML标签中的id属性来创建锚点，并使用链接或JavaScript将页面滚动到这个位置。而::target-text伪元素则是CSS3中新增的一种选择器，它可以用来设置文本选中时的样式。

文字锚点与链接

首先，我们来看一下如何创建基于文字的锚点和链接。我们需要在目标位置处添加一个id属性，并在链接中使用#符号和id值来创建锚点链接。

<h2 id="section1">Section 1</h2>

<a href="#section1">Go to Section 1</a>

在这个例子中，我们在标题“Section 1”上添加了一个id属性，然后使用#section1作为锚点链接的href值。

锚点平滑滚动效果

接下来，我们来为锚点链接添加一个平滑滚动效果。默认情况下，浏览器会瞬间跳转到目标位置，这样体验并不好。我们可以使用JavaScript实现平滑滚动效果。

// 平滑滚动到锚点位置
function smoothScroll(target, duration) {
  const targetElement = document.querySelector(target);
  const targetPosition = targetElement.offsetTop;
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  let startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const run = ease(timeElapsed, startPosition, distance, duration);
    window.scrollTo(0, run);
    if (timeElapsed < duration) requestAnimationFrame(animation);
  }

  function ease(t, b, c, d) {
    t /= d / 2;
    if (t < 1) return c / 2 * t * t + b;
    t--;
    return -c / 2 * (t * (t - 2) - 1) + b;
  }

  requestAnimationFrame(animation);
}

// 监听点击事件，平滑滚动到锚点位置
const links = document.querySelectorAll("[href^='#']");
links.forEach(link => {
  link.addEventListener("click", e => {
    e.preventDefault();
    const target = link.getAttribute("href");
    const duration = 1000;
    smoothScroll(target, duration);
  });
});

这个函数会根据传入的目标元素和持续时间，在页面上平滑滚动。我们可以在监听锚点链接的点击事件时调用它。

::target-text样式设置

CSS3中新增的伪元素::target-text可以用于设置文本选中时的样式。当用户单击包含有id属性的元素或使用#符号加上该元素的id值作为URL的一个锚点时，元素将被选中，此时可以利用::target-text伪元素来为选中文本设置样式。

/* 设置选中文本的背景颜色和文本颜色 */
::target-text {
  background-color: #f7df1e;
  color: #333;
}

在这个例子中，我们为选中文本设置了背景颜色和文本颜色。

需要注意的是，在使用::target-text伪元素时，它必须与:id选择器一起使用，并且它只能用于为选中文本设置样式。

结合文字锚点和::target-text样式

现在，我们来结合上面两种技术，为选中文本设置样式并实现基于文字的URL锚点定位。

<h2 id="section1">Section 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed faucibus turpis eget nisl dictum efficitur. <a href="#section1">Go to section 1.</a></p>

<h2 id="section2">Section 2</h2>
<p>Mauris bibendum lectus vel nulla vehicula, eu pretium mauris interdum. <a href="#section2">Go to section 2.</a></p>

<style>
  /* 设置选中文本的背景颜色和文本颜色 */
  ::target-text {
    background-color: #f7df1e;
    color: #333;
  }
</style>

<script>
  // 平滑滚动到锚点位置
  function smoothScroll(target, duration) {
    const targetElement = document.querySelector(target);
    const targetPosition = targetElement.offsetTop;
    const startPosition = window.pageYOffset;
    const distance = targetPosition - startPosition;
    let startTime = null;

    function animation(currentTime) {
      if (startTime === null) startTime = currentTime;
      const timeElapsed = currentTime - startTime;
      const run = ease(timeElapsed, startPosition, distance, duration);
      window.scrollTo(0, run);
      if (timeElapsed < duration) requestAnimationFrame(animation);
    }

    function ease(t, b, c, d) {
      t /= d / 2;
      if (t < 1) return c / 2 * t * t + b;
      t--;
      return -c / 2 * (t * (t - 2) - 1) + b;
    }

    requestAnimationFrame(animation);
  }

  // 监听点击事件，平滑滚动到锚点位置
  const links = document.querySelectorAll("[href^='#']");
  links.forEach(link => {
    link.addEventListener("click", e => {
      e.preventDefault();
      const target = link.getAttribute("href");
      const duration = 1000;
      smoothScroll(target, duration);
    });
  });
</script>

在这个例子中，我们为两个标题添加了id属性，并在每个段落中添加了一个链接。我们还使用::target-text伪元素为选中文本设置了样式。

同时，我们也实现了平滑滚动效果，当用户单击链接时，页面会平滑滚动到目标位置，并高亮显示选中文本。

注意事项

  1. 在使用文字锚点和::target-text样式时，要注意指定的id值必须是唯一的。
  2. 在使用JavaScript实现平滑滚动效果时，要注意兼容性问题，因为不同浏览器对动画效果的支持程度有所不同。
  3. 在使用::target-text伪元素时，要注意它只能用于为选中文本设置样式，而不能用于修改文本内容或添加其他元素。

总结

基于文字的URL锚点定位和::target-text样式设置是网页设计中常见的技术。通过HTML中的id属性和#符号，我们可以创建锚点链接并实现页面内部跳转。通过JavaScript实现平滑滚动效果，可以提升用户体验。而使用CSS3中新增的::target-text伪元素，可以为选中文本设置样式。我们可以将这些技术结合起来，为网站增加更多的交互性和可读性。

avatar
文章
阅读
粉丝