独立站网页平滑滚动的实现

应用功能要求

做外贸独立站时，经常会用到点击按钮/链接跳转到当前页面对应的段落，并且可以实现顶部部分偏移，以防被悬停的页眉挡住，这种就是点击平滑滚动的应用。

通常是指Smooth scroll，Smooth scroll time (500ms)滚动过渡，Smooth scroll offset (150px)顶部偏移。

代码片段

以下是一段通用代码

document.addEventListener('DOMContentLoaded', function() {
var bannerLinks = document.querySelectorAll('.wd-promo-banner-link');

bannerLinks.forEach(function(bannerLink) {
bannerLink.addEventListener('click', function(event) {
event.preventDefault();
var targetId = this.getAttribute('href').slice(1); // 获取跳转目标的ID
var targetElement = document.getElementById(targetId);
var offsetTop = targetElement.offsetTop - 150;
smoothScrollTo(0, offsetTop, 500);
});
});

function smoothScrollTo(x, y, duration) {
var start = window.scrollY || window.pageYOffset;
var change = y - start;
var startTime = performance.now();

function easeInOutQuad(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;
}

function animateScroll() {
var currentTime = performance.now();
var elapsedTime = currentTime - startTime;
window.scroll(0, easeInOutQuad(elapsedTime, start, change, duration));
if (elapsedTime < duration) {
requestAnimationFrame(animateScroll);
} else {
window.scroll(0, y);
}
}

animateScroll();
}
});

你可以添加到独立站任意页面，在当前页面实现平滑滚动效果。

这样，您可以为任何具有类名Class为 .wd-promo-banner-link 的元素添加链接，并且它们会在点击时平滑滚动到对应的ID。请注意修改对应的Class。