Javascript 目录-动画滚动问题&；添加额外的填充到滚动位置？

您好，我正在尝试改进我的内容片段表。它的工作很好，但我有两个问题

第1期：立即滚动到H标签。我怎样才能让它动画到滚动位置，而不是“捕捉”到它

第二期：我有一个大约80像素高的粘性导航。因此，当H标记滚动到时，我希望它在滚动到标题标记时，在“滚动位置”上方留出额外的100px空间

这是我的密码。您可以运行下面的“完整代码段”

//设置
window.articleWrapperId='#article wrapper'；
window.tableWrapperId='#文章目录'；
$（文档）.ready（函数（）{
createToC（）；
});
函数createToC（）{
//对于包装器中的每个H2
$（window.articleWrapperId+'h2'）。每个（函数（i）{
//获取它的内部HTML
var h2title=$（this.html（）；
//删除其中的所有空格
var anchorId=h2title.replace（/\s/g'）；
//将其作为id附加到H2
$（this.attr（'id'，anchorId）；
//为此创建一个锚点
var anch=''；
//将其附加到目录包装器中
$（window.tableWrapperId）.append（anch）；
});
}

/*https://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126许可证：无（公共域）*/a、缩写、地址、小程序、文章、旁白、音频、b、大、块引号、正文、画布、标题、中心、引用、代码、dd、del、详细信息、dfn、div、dl、dt、em、嵌入、字段集、figcaption、图形、页脚、表单、h1、h2、h3、h4、h5、h6、页眉、hgroup、html、i、iframe、img、ins、kbd、label、，图例，li，mark，menu，nav，object，ol，output，p，pre，q，ruby，s，samp，section，small，span，strike，strong，sub，summary，sup，table，tbody，td，tfoot，th，thead，time，tr，tt，u，ul，var，video{margin:0；padding:0；border:0；font:inherit；垂直对齐：基线}文章，旁白，细节，figcaption，图，页眉，hgroup，menu，nav，section{，section{display:block}正文}行高：1}ul{list style:none}blockquote，q{quotes:none}blockquote:after，blockquote:before，q:after，q:before{content:''；content:none}表{边框折叠：折叠；边框间距：0}
*{框大小：边框框；边距：0；填充：0；}
身体{
宽度：100%；
高度：100vh；
字体系列：无衬线；
背景色：#f6f6f6；
颜色：#666；
}
#包装纸{
宽度：计算（100%-300px）；
浮动：左；
填充：40px；
}
#第条
宽度：300px；
位置：固定；
右：0px；
顶部：0px；
左边框：2个虚线#aaa；
填充：40px；
}
h2，h3{
字体大小：30px；
线高：45px；
边缘底部：20px；
颜色：#333；
}
h3{
字体大小：20px；
线高：25px；
文字装饰：下划线；
}
p{
字号：18px；
线高：30px；
边缘底部：50px；
文本缩进：30px；
}
a{
显示：块；
线高：30px；
文字装饰：无；
颜色：#333；
}
a:悬停{
颜色：红色；
}
@媒体屏幕和屏幕（最大宽度：900px）{
#包装纸{
宽度：100%；
}
#第条
宽度：100%；
职位：继承；
文本对齐：居中；
边界：无；
边框底部：2个虚线#aaa；
}
}

目录
第一个标题
Lorem ipsum door sit amet，dictumst nam turpis ipsum porta ad，wisi ut，dolor qui quam volumpat id donec，tristique convallis velit ac，在magnis nec justo.Libero dui.坐在侵权者的座位上，不吃软肉。生命悬置物：Lorem临产商品：弗利利亚，奥纳诺，整型布朗迪。前庭：毛里斯，拍卖人悬置物：posuere生命的暂时性，连续性，奥基奥姆尼斯·马蒂斯·乌尔特里斯·阿梅特·拉库斯（orci omnis mattis ultrices amet lacus）

Lorem ipsum door sit amet，dictumst nam turpis ipsum porta ad，wisi ut，dolor qui quam volumpat id donec，tristique convallis velit ac，在magnis nec justo.Libero dui.坐在侵权者的座位上，不吃软肉。生命悬置物：Lorem临产商品：弗利利亚，奥纳诺，整型布朗迪。前庭：毛里斯，拍卖人悬置物：posuere生命的暂时性，连续性，奥基奥姆尼斯·马蒂斯·乌尔特里斯·阿梅特·拉库斯（orci omnis mattis ultrices amet lacus）

第二标题
Lorem ipsum door sit amet，dictumst nam turpis ipsum porta ad，wisi ut，dolor qui quam volumpat id donec，tristique convallis velit ac，在magnis nec justo.Libero dui.坐在侵权者的座位上，不吃软肉。生命悬置物：Lorem临产商品：弗利利亚，奥纳诺，整型布朗迪。前庭：毛里斯，拍卖人悬置物：posuere生命的暂时性，连续性，奥基奥姆尼斯·马蒂斯·乌尔特里斯·阿梅特·拉库斯（orci omnis mattis ultrices amet lacus）

第三标题
Lorem ipsum door sit amet，dictumst nam turpis ipsum porta ad，wisi ut，dolor qui quam volumpat id donec，tristique convallis velit ac，在magnis nec justo.Libero dui.坐在侵权者的座位上，不吃软肉。生命悬置物：Lorem临产商品：弗利利亚，奥纳诺，整型布朗迪。前庭：毛里斯，拍卖人悬置物：posuere生命的暂时性，连续性，奥基奥姆尼斯·马蒂斯·乌尔特里斯·阿梅特·拉库斯（orci omnis mattis ultrices amet lacus）

Lorem ipsum door sit amet，dictumst nam turpis ipsum porta ad，wisi ut，dolor qui quam volumpat id donec，tristique convallis velit ac，在magnis nec justo.Libero dui.坐在侵权者的座位上，不吃软肉。生命悬置物：Lorem临产商品：弗利利亚，奥纳诺，整型布朗迪。前庭：毛里斯，拍卖人悬置物：posuere生命的暂时性，连续性，奥基奥姆尼斯·马蒂斯·乌尔特里斯·阿梅特·拉库斯（orci omnis mattis ultrices amet lacus）

Lorem ipsum door sit amet，dictumst nam turpis ipsum porta ad，wisi ut，dolor qui quam volumpat id donec，tristique convallis velit ac，在magnis nec justo.Libero dui.坐在侵权者的座位上，不吃软肉。生命悬置物：Lorem临产商品：弗利利亚，奥纳诺，整型布朗迪。前庭：毛里斯，拍卖人悬置物：posuereM