如何用jQuery实现点击元素滚动到顶部后再次点击返回原位置？

要实现这个点击切换的滚动效果，不用纠结.toggle()，直接通过保存滚动位置+状态判断就能搞定，具体代码和思路如下：

首先声明两个变量，分别用来存储点击前的滚动位置和当前的滚动状态：

• prevScrollPos：记录点击元素前页面的滚动位置
• isScrolledToTop：标记当前页面是否已经滚动到顶部

完整代码：

let prevScrollPos = 0;
let isScrolledToTop = false;

$('.course-header').click(function() {
  if (!isScrolledToTop) {
    // 保存当前滚动位置
    prevScrollPos = $("html, body").scrollTop();
    // 滚动到页面顶部
    $("html, body").animate({scrollTop: 0}, "smooth");
    isScrolledToTop = true;
  } else {
    // 滚动回之前保存的初始位置
    $("html, body").animate({scrollTop: prevScrollPos}, "smooth");
    isScrolledToTop = false;
  }
  return false;
});

逻辑说明： #

• 第一次点击.course-header时，页面还没到顶部，先把当前滚动位置存起来，再执行滚动到顶部的动画，同时切换状态标记；
• 再次点击时，状态标记为已到顶部，就用之前保存的位置执行滚动动画，切回状态标记；
• 反复点击就能在顶部和原位置之间循环切换。

另外补充：jQuery的.toggle()事件在1.9版本后已被移除，而且它本身也不适合这种需要保存状态数据的场景，用状态变量的方式更稳定可控。

内容的提问来源于stack exchange，提问作者The humble learner