HTML 列表项黏住顶部并点击回滚：使用 CSS sticky 和 JavaScript

可以使用 CSS 的 'position: sticky' 属性来实现黏住顶部的效果，同时使用 JavaScript 的 scroll 事件和 offsetTop 属性来实现点击回到原位置的效果。

首先，在需要黏住的 li 元素上添加如下 CSS 样式：

li.sticky {
  position: sticky;
  top: 0;
}

这样，当用户滚动到该 li 元素位置时，它就会黏住在顶部。

接下来，使用 JavaScript 监听页面的 scroll 事件，当用户滚动到黏住的 li 元素位置时，为它添加一个 class 名。

window.addEventListener('scroll', function() {
  var li = document.querySelector('.sticky');
  if (window.pageYOffset >= li.offsetTop) {
    li.classList.add('sticky-top');
  } else {
    li.classList.remove('sticky-top');
  }
});

这里使用了 classList 属性，当用户滚动到 li 元素位置时，为它添加一个名为 'sticky-top' 的 class，这个 class 可以用来实现更多的样式效果。

最后，为黏住的 li 元素添加点击事件，当用户点击它时，页面会滚动到该 li 元素原本的位置。

var stickyLi = document.querySelector('.sticky');
stickyLi.addEventListener('click', function() {
  window.scrollTo({
    top: stickyLi.offsetTop,
    behavior: 'smooth'
  });
});

这里使用了 JavaScript 的 scrollTo 方法，它可以平滑地滚动页面到指定位置。在这里，我们将页面滚动到黏住的 li 元素的 offsetTop 位置，也就是它原本的位置。

完整代码如下：

HTML：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class='sticky'>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

CSS：

li.sticky {
  position: sticky;
  top: 0;
}

li.sticky-top {
  background-color: #ccc;
}

JavaScript：

window.addEventListener('scroll', function() {
  var li = document.querySelector('.sticky');
  if (window.pageYOffset >= li.offsetTop) {
    li.classList.add('sticky-top');
  } else {
    li.classList.remove('sticky-top');
  }
});

var stickyLi = document.querySelector('.sticky');
stickyLi.addEventListener('click', function() {
  window.scrollTo({
    top: stickyLi.offsetTop,
    behavior: 'smooth'
  });
});