Javascript scrollspy动画不会工作，我也不知道如何让它工作

所以我周五有一个作业要准备我的作品集，我决定把它做成一页卷轴，但是如果没有bootstrap（不允许使用bootstrap），我似乎无法让scrollspy工作。有人知道我如何让它工作吗

我尝试过不同类型的js脚本和jquery，但似乎无法让它们正常工作

请探索
和
发现

---

我希望当我单击contact时，它会平滑地滚动到contact部分

使用Bootstrap或jQuery slideDown（）方法

身体{
字体系列：“红帽显示”，无衬线；
背景色：#2D3436；
颜色：#EEEEEE；
保证金：0；
}
.介绍{
字体大小：30px；
位置：绝对位置；
顶部：160px；
左：10px；
h1{
左边距：20px；
边际上限：0；
页边距底部：0；
}
}
.导航{
文本对齐：居中；
字体大小：30px；
位置：相对位置；
背景色：#202020；
高度：604px；
保证金：0；
填充：0；
宽度：550px；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
保证金：0；
柔性包装：包装；
.导航{
自对准：柔性端；
边界左下半径：25%；
div{
显示器：flex；
高度：500px；
对齐项目：居中；
证明内容：中心；
边缘顶部：20px；
}
a{
文字装饰：无；
颜色：#EEEEEE；
填充：10px；
&：参观
{
颜色：#EEEEEE；
}
}
}
}
.个人资料图像{
边界半径：50%；
}
.按钮-8{
颜色：黑色；
背景色：#00CEC9；
填充：10px 15px；
边框：2倍实心；
边界半径：25px；
宽度：160px；
边框颜色：#00CEC9；
字体大小：14px；
字体大小：粗体；
左边距：25px；
&：悬停{
背景色：浅绿色；
边框颜色：浅绿色；
光标：指针；
}
}
.分隔器{
文本对齐：居中；
字体大小：30px；
保证金：20px 0 20px 0；
}
.工作{
文本对齐：居中；
对正内容：左；
背景色：#202020；
}
.works-sub1{
显示器：flex；
文本对齐：左对齐；
调整内容：灵活启动；
img{
高度：150像素；
宽度：150px；
边缘顶部：20px；
左边距：100px；
边缘底部：20px；
}
p{
填充：10px；
字体大小：25px；
}
}
.works-sub2{
显示器：flex；
文本对齐：左对齐；
证明内容：柔性端；
img{
高度：150像素；
宽度：150px；
右边距：100px；
}
p{
填充：10px；
字体大小：25px；
文本对齐：右对齐；
}
}
.works-sub3{
显示器：flex；
文本对齐：左对齐；
调整内容：灵活启动；
img{
高度：150像素；
宽度：150px；
左边距：100px；
边缘顶部：20px；
边缘底部：40px；
}
p{
填充：10px；
字体大小：25px；
}
}
.关于{
显示器：flex；
背景色：#2D3436；
弯曲方向：立柱；
h1{
文本对齐：左对齐；
左边距：30px；
字体大小：40px；
}
}
.关于标签{
文本对齐：左对齐；
字体大小：25px；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
颜色：#00CEC9；
左侧填充：20px；
垫底：5px；
}
.关于内容{
文本对齐：右对齐；
字体大小：25px；
右边填充：20px；
}
.联系方式{
显示器：flex；
背景色：#202020；
弯曲方向：立柱；
高度：500px；
证明内容：中心；
对齐内容：居中对齐；
}
.联系方式{
对齐项目：居中；
证明内容：中心；
p{
保证金：0；
字体大小：25px；
显示器：flex；
文本对齐：居中；
证明内容：中心；
}
}
.容器图标{
显示器：flex；
弯曲方向：行；
对正内容：空间均匀；
对齐项目：柔性端；
我{
字体大小：25px；
颜色：#00CEC9；
填充顶部：150px；
}
}

文件夹
请探索
和
发现


HTML-CSS-SCSS-JS

作品
这是我制作的一个互动式扫雷机盒子

使用flexbox

这是一个我一起配置的棋盘

使用html和css。这是用网格完成的

这是我制作的一个互动式扫雷机盒子

使用flexbox

我的工作（技能）
头
/头
生化需氧量
<div class="container">
    <div class="intro">
        <h1>Please explore</h1>
        <h1>and</h1>
        <h1>Discover.</h1>
        <br>
        <a href="#works"><input id="works" class= "button-8" type="submit" value="projects" name= " "></a>
    </div>  

<a href="#contact" class="goToSection">Contact</a>
<a href="#CV" class="goToSection">CV</a>

<script type="text/javascript">
    $(document).on('click','.goToSection',function(e){
        e.preventDefault();
        $($(this).attr('href')).slideDown();
    })
</script>