Javascript jQuery[data anchor]似乎出现故障

这是一个简单的点击和滚动到div使用锚。在单击其他选项之前，第一个选项似乎可以正常工作。一旦你点击第二个链接，它就不会滚动，相反，它只会向下滚动几个像素。如果你开始随机按它们，它只会变成一团乱麻，随意滚动到任何地方

这是我做的一支钢笔：

jQuery.noConflict（）；
jQuery（文档）.ready（函数（$）{
$（“[data anchor]”）。单击（函数（）{
var target=$（$（this.data（'anchor'））；
if（目标长度）{
$（'.right'）。设置动画({
scrollTop:target.offset（）.top
}, 1000);
}
});
});
*{
填充：0；
保证金：0；
}
html，
身体{
宽度：100%；
身高：100%；
}
保险商实验室{
列表样式：无；
}
李{
字号：2rem；
填充：20px0；
光标：指针；
}
李：悬停{
颜色：白色；
}
.包装纸{
宽度：100%；
身高：100%；
}
.左{
浮动：左；
宽度：20%；
身高：100%；
显示器：flex；
对齐项目：居中；
证明内容：中心；
背景色：rgba（0,0,0,0.2）；
}
.颜色{
字号：2rem；
填充：20px0；
光标：指针；
}
.颜色：悬停{
颜色：白色；
}
.对{
浮动：左；
宽度：80%；
身高：100%；
溢出：自动；
}
.右分区{
显示器：flex；
对齐项目：居中；
高度：200px；
背景色：rgba（0,0,0,0.4）；
填充：20px；
边框：2倍纯白；
颜色：白色；
字号：2rem；
}
#蓝色的{
背景颜色：蓝色；
}
#绿色的{
背景颜色：绿色；
}
#黄色的{
背景颜色：黄色；
}
#红色的{
背景色：红色；
}

变蓝
走向绿色
变黄
变红
灰色
灰色
灰色
灰色
灰色
蓝色
灰色
灰色
灰色
灰色
灰色
绿色
灰色
灰色
灰色
灰色
灰色
黄色的
灰色
灰色
灰色
灰色
灰色
红色
灰色
灰色
灰色
灰色
灰色
只需做以下更改

它应该是目标[0]。offsetTop
$('.right').animate({
   scrollTop: target[0].offsetTop
}, 1000);