Javascript 使用带有固定Div的scrollTop设置动画

我在屏幕上有两个部分，左侧有菜单项，右侧有内容。Content div是具有自动滚动功能的固定位置

左侧菜单有3个项目，单击任何项目，我希望用户导航到content div上的特定部分（已修复）

我的代码

function goToByScroll(id) {
  // Scroll
  $('.content-pos-fixed').animate({
    scrollTop: $("#" + id).offset().top - 152
  },'slow');
}

---

由于某些原因，它无法按预期工作。

请尝试此代码。

function goToByScroll(id,event) {
    event.preventDefault();
    $('.content-pos-fixed').animate({
        scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop() 
    },'slow');
}

$（文档）.ready（函数（）{
$（'a'）。在（'click'，函数（事件）{
var id=$（this.attr（'href'）；
戈托比斯克罗尔（id，事件）；
});
函数goToByScroll（id，事件）{
event.preventDefault（）；
$（'.content pos fixed'）。动画({
scrollTop:$（id）.offset（）.top+$（'.content pos fixed'）.scrollTop（）}，'slow'）；
}
});
*{边距：0；填充：0；框大小：边框框；字体系列：arial；文本装饰：无；颜色：黑色；}
导航{位置：固定；顶部：0；左侧：0；右侧：0；背景：#fff；z索引：9999；}
导航a{颜色：白色；显示：内联块；填充：1rem；浮动：左侧；字体重量：粗体；}
截面{高度：100vh；}
导航a:第n个孩子（3n+1），主要部分：第n个孩子（3n+1）{背景：#B1A464；}
导航a:第n个孩子（3n+2），主要部分：第n个孩子（3n+2）{背景：#2d74b2；}
导航a：第n个孩子（3n+3），主要部分：第n个孩子（3n+3）{背景：#e5ec10；}
导航a:第n个孩子（3n+4），主要部分：第n个孩子（3n+4）{背景：#cfa5df；}
div{position:relative；padding:1rem；}
页脚{背景：rgba（255，255，255，0.4）；高度：55px；位置：固定；底部：0；左：0；右：0；z索引：7777；}
.down{背景：白色；显示：块；边框半径：100px；宽度：50px；高度：50px；位置：固定；底部：5%；右侧：5%；z索引：8888；}
.down：：在{content:▼"; 位置：相对；左侧：15px；顶部：15px；}
导航a{
颜色：白色；
显示：内联块；
填充：1rem；
浮动：左；
字体大小：粗体；
宽度：100%；
}
导航{
位置：固定；
/*排名：0*/
左：0；
右：0；
背景：#fff；
z指数：9999；
宽度：300px；
身高：100%；
}
主要{
浮动：对；
宽度：计算（100%-300px）；
溢出：自动；
位置：固定；
右：0；
身高：100%；
}

家
关于
服务
接触
试试这个代码

function goToByScroll(id,event) {
    event.preventDefault();
    $('.content-pos-fixed').animate({
        scrollTop: $(id).offset().top+$('.content-pos-fixed').scrollTop() 
    },'slow');
}


$（文档）.ready（函数（）{
$（'a'）。在（'click'，函数（事件）{
var id=$（this.attr（'href'）；
戈托比斯克罗尔（id，事件）；
});
函数goToByScroll（id，事件）{
event.preventDefault（）；
$（'.content pos fixed'）。动画({
scrollTop:$（id）.offset（）.top+$（'.content pos fixed'）.scrollTop（）}，'slow'）；
}
})；
*{边距：0；填充：0；框大小：边框框；字体系列：arial；文本装饰：无；颜色：黑色；}
导航{位置：固定；顶部：0；左侧：0；右侧：0；背景：#fff；z索引：9999；}
导航a{颜色：白色；显示：内联块；填充：1rem；浮动：左侧；字体重量：粗体；}
截面{高度：100vh；}
导航a:第n个孩子（3n+1），主要部分：第n个孩子（3n+1）{背景：#B1A464；}
导航a:第n个孩子（3n+2），主要部分：第n个孩子（3n+2）{背景：#2d74b2；}
导航a：第n个孩子（3n+3），主要部分：第n个孩子（3n+3）{背景：#e5ec10；}
导航a:第n个孩子（3n+4），主要部分：第n个孩子（3n+4）{背景：#cfa5df；}
div{position:relative；padding:1rem；}
页脚{背景：rgba（255，255，255，0.4）；高度：55px；位置：固定；底部：0；左：0；右：0；z索引：7777；}
.down{背景：白色；显示：块；边框半径：100px；宽度：50px；高度：50px；位置：固定；底部：5%；右侧：5%；z索引：8888；}
.down：：在{content:▼“位置：相对；左侧：15px；顶部：15px；}”
导航a{
颜色：白色；
显示：内联块；
填充：1rem；
浮动：左；
字体大小：粗体；
宽度：100%；
}
导航{
位置：固定；
/*排名：0*/
左：0；
右：0；
背景：#fff；
z指数：9999；
宽度：300px；
身高：100%；
}
主要{
浮动：对；
宽度：计算（100%-300px）；
溢出：自动；
位置：固定；
右：0；
身高：100%；
}

家
关于
服务
接触
你在下面链接的答案-你在下面链接的答案-