Javascript 单击跨度元素时，平滑滚动到特定div

我对这一切都很陌生，所以我可能只是错过了一些东西。然而，我试图在我的网页底部创建一个箭头，然后滚动到它下面的div。我读了这篇文章，但没能让它为我工作。我在这里开始拉小提琴：（黑匣子是箭头的占位符。）

这是我所拥有的

HTML:

html，
身体{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
#英雄文本{
文本对齐：居中；
位置：相对位置；
最高：50%；
-ms转换：translateY（-50%）；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
颜色：白色；
字体系列：stevie sans，sans serif；
字体风格：普通；
字号：500；
字体大小：40px；
文本阴影：0px 0px 3px rgba（0,0,0,5）；
左侧填充：20px；
右边填充：20px；
}
#家庭英雄{
显示：块；
宽度：100%；
身高：100%；
背景图像：线性梯度（130度，rgb（249204,0）0%，rgb（249185,60）100%）；
背景尺寸：封面；
背景重复：无重复；
背景位置：50%50%；
}
.主页箭头{
位置：绝对位置；
宽度：50px；
高度：13px；
背景：url（“images/arrow.svg”）无重复中心；
背景色：#000；
背景尺寸：50px 13px；
底部：20px；
左：50%；
左边距：-25px；
填充物：5px；
框大小：内容框；
显示：块；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
过滤器：投影（0px 0px 5px rgba（0,0,0,3））；
}
.大烛光{
保证金：自动；
填充顶部：100px；
填充底部：100px；
左侧填充：20px；
右边填充：20px；
颜色：303030；
最大宽度：1000px；
文本对齐：居中；
}

测试

嘿
我是一些示例文本

您需要添加jQuery脚本：

$（“.homepage arrow”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#about”）.offset（）.top}，
“慢”）；
});
html，
身体{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
#英雄文本{
文本对齐：居中；
位置：相对位置；
最高：50%；
-ms转换：translateY（-50%）；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
颜色：白色；
字体系列：stevie sans，sans serif；
字体风格：普通；
字号：500；
字体大小：40px；
文本阴影：0px 0px 3px rgba（0,0,0,5）；
左侧填充：20px；
右边填充：20px；
}
#家庭英雄{
显示：块；
宽度：100%；
身高：100%；
背景图像：线性梯度（130度，rgb（249204,0）0%，rgb（249185,60）100%）；
背景尺寸：封面；
背景重复：无重复；
背景位置：50%50%；
}
.主页箭头{
位置：绝对位置；
宽度：50px；
高度：13px；
背景：url（“images/arrow.svg”）无重复中心；
背景色：#000；
背景尺寸：50px 13px；
底部：20px；
左：50%；
左边距：-25px；
填充物：5px；
框大小：内容框；
显示：块；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
过滤器：投影（0px 0px 5px rgba（0,0,0,3））；
}
.大烛光{
保证金：自动；
填充顶部：100px；
填充底部：100px；
左侧填充：20px；
右边填充：20px；
颜色：303030；
最大宽度：1000px；
文本对齐：居中；
}

测试

嘿
我是一些示例文本
您需要添加jQuery脚本：


$（“.homepage arrow”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“#about”）.offset（）.top}，
“慢”）；
});
html，
身体{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
}
#英雄文本{
文本对齐：居中；
位置：相对位置；
最高：50%；
-ms转换：translateY（-50%）；
-webkit转换：translateY（-50%）；
转化：translateY（-50%）；
颜色：白色；
字体系列：stevie sans，sans serif；
字体风格：普通；
字号：500；
字体大小：40px；
文本阴影：0px 0px 3px rgba（0,0,0,5）；
左侧填充：20px；
右边填充：20px；
}
#家庭英雄{
显示：块；
宽度：100%；
身高：100%；
背景图像：线性梯度（130度，rgb（249204,0）0%，rgb（249185,60）100%）；
背景尺寸：封面；
背景重复：无重复；
背景位置：50%50%；
}
.主页箭头{
位置：绝对位置；
宽度：50px；
高度：13px；
背景：url（“images/arrow.svg”）无重复中心；
背景色：#000；
背景尺寸：50px 13px；
底部：20px；
左：50%；
左边距：-25px；
填充物：5px；
框大小：内容框；
显示：块；
-webkit转换：translateZ（0）；
变换：translateZ（0）；
过滤器：投影（0px 0px 5px rgba（0,0,0,3））；
}
.大烛光{
保证金：自动；
填充顶部：100px；
填充底部：100px；
左侧填充：20px；
右边填充：20px；
颜色：303030；
最大宽度：1000px；
文本对齐：居中；
}

测试

嘿
我是一些示例文本
您需要添加Jquery脚本：谢谢，效果很好@BanzayI将其作为答案发布。您需要添加Jquery脚本：谢谢，效果很好@班扎伊将其作为答案发布。