Javascript 从引导导航栏滚动到元素

我正在为一个小协会开发一个网站。它是使用bootstrap4构建的，我有一个

navbar

，它链接到几个

flex容器

。我希望这些链接能够顺利滚动到这些元素

我使用以下jQuery来实现这一点：

// Scroll to id from nav items
$(".navbar a").click(function () {
    $("body,html").animate({
        scrollTop: $("#" + $(this).data('value')).offset().top - $('.navbar').height() - 10
    }, 1000)

});

这应该滚动到与

柔性容器顶部相对应的位置
-
导航栏的高度
-
缓冲区为10

我在同一个
.js
文件中也有这个流，当用户滚动时，它使用淡入文本/图像：

// Reveal text on scroll through
window.sr = ScrollReveal({ reset: true });
sr.reveal('.reveal', { opacity: 0.1, duration:600 });

通常，单击导航链接
最初会在上方滚动，但第二次单击后会重新滚动到正确的位置。我发现，如果我删除了
ScrollReveal
调用，滚动就会按预期工作

上面的代码片段有什么问题吗


//获取标题的屏幕高度
$（文档）.ready（函数（）{
$（'.header'）.height（$（window.height（））；
});
//从导航项目滚动到id
$（“.navbar a”）。单击（函数（）{
$（“body，html”）.animate({
scrollTop:$（“#”+$（this）.data（'value'））.offset（）.top-$（'.navbar'）.height（）-10
}, 1000)
});
//标题按钮->向下滚动
$（“.header按钮”）。单击（函数（）{
$（“body，html”）.animate({
scrollTop:$（“#”+$（this）.data（'value'））.offset（）.top-$（'.navbar'）.height（）-10
}, 1000)
});
//这就是问题的根源//
//在滚动浏览时显示文本
window.sr=ScrollReveal（{reset:true}）；
sr.REVEL（'.REVEL'，{不透明度：0.1，持续时间：600}）
@font-face{
字体系列：“Raleway”；
字体风格：普通；
字体大小：400；
src:local（'ralway'）、local（'ralway-Regular'）、url(https://fonts.gstatic.com/s/raleway/v12/1Ptug8zYS_SKggPNyC0ISg.ttf)格式（“truetype”）；
}
html，
h1，
h2，
h3，
h4，
h5，
h6，
P
a{
字体系列：“Raleway”，衬线；
}
p{
字号：1rem；
}
html{
身高：100%！重要；
}
.柔性容器{
左侧填充：.8em！重要；
右边填充：.8em！重要；
}
/*导航条*/
navbar先生{
背景色：rgba（26,62,85,0.88）；
}
.导航链路，
.navbar品牌{
颜色：rgba（141162180,0.9）；
光标：指针；
}
.导航链路{
右边距：1em！重要；
}
.导航链接：悬停{
颜色：#4bb2f9！重要；
}
.导航栏倒塌{
证明内容：柔性端；
}













关于
肌动蛋白艺术是一门科学
科学与艺术相结合的交流项目。其目的是提高公众对该领域的兴趣
科学和解释最近的科学发现。我们正在制作一系列简短的插图，
以科学为基础的书籍，通过有趣的冒险故事为3-5岁的孩子准确地传递科学

由于科学是准确的，家长和老师会给孩子们读故事
他们也会学习，并且能够更好地向孩子们解释科学。我们故事中的人物
基于科学家在实验室研究的真实分子、蛋白质和细胞。我们的目标是这些书将激发人们的灵感
儿童和成人都会像我们一样被细胞、分子和生物学所激发


学校工作坊


我们最近在位于巴黎第五区的里昂托儿所举办了一个讲习班。之后
我们用自己的作品讲了大约15分钟的故事，我们举办了一些与我们的作品相关的活动
故事。这是一个巨大的成功，孩子们真的参与了我们的故事。之后
三个月后，我们对学校进行了跟踪，很高兴地发现孩子们
记住了我们故事中的一些关键概念

学校非常感谢我们的参与，并期待着我们的下一次访问
研讨会–现状
我们！事实上，我们希望在巴黎周围的其他托儿所（3-5岁）举办类似的会议。如果你
请邀请我们在贵校举办一次
书
我们一直在努力出版我们的一些故事，并很高兴地宣布
前三部——珍妮丝·埃斯普利斯·库里尤斯系列的一部分——将于2018年11月出版！
这些书是针对3岁以上的儿童编写的，由我们工作组的成员编写
科学家是他们领域的专家，希望帮助儿童（和成人）变得兴奋
关于科学。对于每一本书，作者和插画家都努力使故事同时发生
科学准确，令人兴奋和美丽。



展览


补充我们正在出版的书籍，并庆祝美丽的艺术品
<div id="about">  
  <div class="flex-container mt-5 reveal">