HTML 中使用 sticky 属性实现 div 黏住顶部并点击 li 回到原位

CSS：

.sticky-div { position: sticky; top: 0; }

JavaScript：

// 获取所有需要回到原位置的 li 元素 const scrollToElements = document.querySelectorAll('.scroll-to');

// 监听点击事件 scrollToElements.forEach(element => { element.addEventListener('click', () => { // 获取元素在页面中的位置 const elementPosition = element.getBoundingClientRect().top + window.scrollY; // 滚动页面至该位置 window.scrollTo({ top: elementPosition, behavior: 'smooth' // 添加平滑滚动效果 }); }); });

通过以上步骤，我们可以实现将 div 黏住页面顶部，并点击 li 元素回到其在页面中的原始位置的效果。