单击divs不'；t使用jQuery滚动到元素

我有以下带有单击处理程序的代码：

$（文档）.ready（函数（）{
$（'.black btn'）。单击（函数（）{
$（'.popup-cats-wrapper'）。动画({
scrollTop:$（“.black anchor”）.offset（）.top-100
}, 400)
});
$（'.red btn'）。单击（函数（）{
$（'.popup-cats-wrapper'）。动画({
scrollTop:$（“.red anchor”）.offset（）.top-100
}, 400)
});
$（'.green btn'）。单击（函数（）{
$（'.popup-cats-wrapper'）。动画({
scrollTop:$（“.green anchor”）.offset（）.top-100
}, 400)
});
$（'.blue btn'）。单击（函数（）{
$（'.popup-cats-wrapper'）。动画({
scrollTop:$（“.blue anchor”）.offset（）.top-100
}, 400)
});
});
正文{
字体大小：12px；
字体系列：“sans”；
}
.英雄类包装{
溢出：隐藏；
高度：200px；
}
.弹出式猫包装{
高度：200px；
宽度：300px；
背景：#aaa；
显示：内联块；
填充顶部：20px；
左侧填充：20px；
右边填充：20px；
垫底：0px；
溢出-x：自动；
}
.类别侧栏{
宽度：120px；
背景:#ececef；
高度：200px；
填充顶部：20px；
浮动：左；
}
.弹出菜单行{
填充：5px 8px；
颜色：#212121；
字号：600；
光标：指针；
边界半径：25px；
边缘底部：5px；
}
.色块{
边缘底部：10px；
边缘顶部：25px；
}
.猫的头衔{
字号：600；
字体大小：12px；
颜色：#000；
边缘底部：15px；
}

黑色
红色
绿色
蓝色
黑色
黑色是最暗的颜色，是由于没有或完全吸收可见光的结果。它是一种无色的颜色，一种没有色调的颜色，像白色和灰色。
红色
红色是可见光光谱末端的颜色，仅次于橙色，与紫色相对。它的主波长约为625–740纳米。它是RGB颜色模型和CMYK颜色模型中的原色，并且是
青色的互补色。
绿色
绿色是可见光谱中介于蓝色和黄色之间的颜色。它由占主导地位的波长约为495-570 nm的光诱发。
蓝色
蓝色是绘画和传统色彩理论以及RGB色彩模型中颜料的三种原色之一。在可见光的光谱上，它位于紫色和绿色之间。当用眼睛观察光线时，眼睛感觉到蓝色
主波长大约在450到495纳米之间。大多数蓝色都含有其他颜色的轻微混合；蔚蓝含有一些绿色，群青则含有一些紫色。
您的问题是
.offset（）.top
提供元素到其父元素的当前偏移量，然后您可以使用该偏移量将父元素设置为。您需要做的是将元素
.offset（）.top
添加到父级的当前
滚动顶部


$（文档）.ready（函数（）{
var$wrapper=$（'.popup-cats-wrapper'）；
$（'.black btn'）。单击（函数（）{
$wrapper.animate({
scrollTop:$wrapper.scrollTop（）+$（“.black anchor”）.offset（）.top-10
}, 400)
});
$（'.red btn'）。单击（函数（）{
$wrapper.animate({
scrollTop:$wrapper.scrollTop（）+$（“.red anchor”）.offset（）.top-10
}, 400)
});
$（'.green btn'）。单击（函数（）{
$wrapper.animate({
scrollTop:$wrapper.scrollTop（）+$（“.green anchor”）.offset（）.top-10
}, 400)
});
$（'.blue btn'）。单击（函数（）{
$wrapper.animate({
scrollTop:$wrapper.scrollTop（）+$（“.blue anchor”）.offset（）.top-10
}, 400)
});
});
正文{
字体大小：12px；
字体系列：“sans”；
}
.英雄类包装{
溢出：隐藏；
高度：200px；
}
.弹出式猫包装{
高度：200px；
宽度：300px；
背景：#aaa；
显示：内联块；
填充顶部：20px；
左侧填充：20px；
右边填充：20px；
垫底：0px；
溢出-x：自动；
}
.类别侧栏{
宽度：120px；
背景:#ececef；
高度：200px；
填充顶部：20px；
浮动：左；
}
.弹出菜单行{
填充：5px 8px；
颜色：#212121；
字号：600；
光标：指针；
边界半径：25px；
边缘底部：5px；
}
.色块{
边缘底部：10px；
边缘顶部：25px；
}
.猫的头衔{
字号：600；
字体大小：12px；
颜色：#000；
边缘底部：15px；
}

黑色
红色
绿色
蓝色
黑色
黑色是最暗的颜色，是由于没有或完全吸收可见光的结果。它是一种无色的颜色，一种没有色调的颜色，像白色和灰色。
红色
红色是可见光光谱末端的颜色，仅次于橙色，与紫色相对。它的主波长约为625–740纳米。它是RGB颜色模型和CMYK颜色模型中的原色，并且是
青色的互补色。
绿色
绿色是可见光谱中介于蓝色和黄色之间的颜色。它由占主导地位的波长约为495-570 nm的光诱发。
蓝色
蓝色是绘画和传统色彩理论以及RGB色彩模型中颜料的三种原色之一。在可见光的光谱上，它位于紫色和绿色之间。当用眼睛观察光线时，眼睛感觉到蓝色
主波长大约在450到495纳米之间。大多数蓝色都含有其他颜色的轻微混合；蔚蓝含有一些绿色，群青则含有一些紫色。
这些不是锚定链接。你应该使用锚定标记来实现可访问性，而且只是这样。部分问题是类选择器返回一个元素数组，所以脚本不知道你指的是哪一个。您需要指定零ind