使用HTML和CSS实现平滑滚动和锚点链接

翻滚的胖子
2023-06-12 18:38:11
前端技术
HTML CSS JavaScript

在网页设计中，平滑滚动和锚点链接是常用的功能。本文将为大家详细讲解如何使用HTML和CSS实现平滑滚动和锚点链接。

一、平滑滚动

平滑滚动是指当我们点击页面上的链接时，页面能够平滑地滚动到对应的位置。下面是实现平滑滚动的代码：

function smoothScroll(target, duration) {
  var targetElement = document.querySelector(target);
  var targetPosition = targetElement.offsetTop;
  var startPosition = window.pageYOffset;
  var distance = targetPosition - startPosition;
  var startTime = null;

  function animation(currentTime) {
    if (startTime === null) startTime = currentTime;
    var timeElapsed = currentTime - startTime;
    var 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);
}

var toTopButton = document.querySelector('.to-top-button');
toTopButton.addEventListener('click', function() {
  smoothScroll('#header', 1000);
});

以上代码中，我们定义了一个smoothScroll函数，该函数接受两个参数：目标元素（target）和动画时间（duration）。在函数内部，我们首先获取目标元素的位置和当前页面的位置，然后计算出两者之间的距离。接着，我们定义了一个animation函数，该函数用于执行平滑滚动动画。在animation函数内部，我们使用了requestAnimationFrame方法，该方法用于执行动画。