基于jQuery实现多按钮切换滚动至自身与父容器顶部的求助

嘿，我来帮你梳理这个问题～你的需求很明确：让每个带相同类名的按钮，在首次点击时滚动到按钮自身顶部，再次点击时滚动到父容器顶部，同时切换按钮文本对吧？先说说你原代码里的小问题：

你的条件判断if ($(this) !== $(this).offset().top;)逻辑有误——$(this)是jQuery对象，$(this).offset().top是数值，两者根本没法直接比较；而且你没有给每个按钮记录状态（当前是展开还是收起状态），所以每次点击都没法判断该执行哪段滚动逻辑。

接下来给你一套可行的解决方案，分步骤拆解：

1. 给按钮添加独立状态标记 #

我们用jQuery的data()方法给每个按钮存储一个专属状态（比如isOpen，初始设为false），这样多个按钮之间的状态不会互相干扰。

2. 修正滚动与文本切换逻辑 #

• 当状态为false（首次点击，要展开项目）：滚动到按钮顶部，把状态改为true，按钮文本替换成“Close Project”
• 当状态为true（再次点击，要收起项目）：滚动到按钮的父div顶部，状态改回false，按钮文本换回“Open Project”

完整可运行代码示例 #

// 给每个按钮初始化状态，确保独立工作
$(".buttonToggleProjectDetails").each(function() {
  $(this).data('isOpen', false);
});

$(".buttonToggleProjectDetails").click(function() {
  const $currentBtn = $(this);
  const isProjectOpen = $currentBtn.data('isOpen');

  if (!isProjectOpen) {
    // 首次点击：滚动到按钮顶部，切换状态和文本
    $('html, body').animate({
      scrollTop: $currentBtn.offset().top
    }, 'slow');
    $currentBtn.data('isOpen', true);
    $currentBtn.text('Close Project');
  } else {
    // 再次点击：滚动到父容器顶部，切换状态和文本
    $('html, body').animate({
      scrollTop: $currentBtn.parent().offset().top
    }, 'slow');
    $currentBtn.data('isOpen', false);
    $currentBtn.text('Open Project');
  }
});

额外小提示 #

• 把$(this)存成变量$currentBtn，避免重复查询DOM，能稍微提升性能
• 用$('html, body')是为了兼容不同浏览器的滚动对象，确保动画在所有浏览器里都能正常触发

这样每个按钮都能独立完成你想要的滚动切换效果啦～

内容的提问来源于stack exchange，提问作者Justin Graham