理解JQuery平滑滚动失败

Question

我是新来的，所以提前感谢您的耐心等待！我开始学习JQuery并试图了解如何实现平滑滚动。我已经搜索了很多教程并尝试了这个简单的教程，因此我可以尝试理解代码的工作方式（而不是依赖插件）：

https://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2

我已经在codepen中设置了它，但它不起作用。该页面只是跳到锚点并且不会滚动。我尝试了另一个（不同的）教程并得到了相同的结果。我显然遗漏了一些基本的东西但我无法弄明白，即使在谷歌搜索和寻找答案之后。任何人都可以通过解释错误来帮助我吗？

https://codepen.io/dotdorothy/pen/BpRVZo

这是codepen JS部分的代码（上面的链接将显示HTML和CSS）：

$('a[href^="#"]').on('click', function(event) {

var target = $(this.getAttribute('href'));

if( target.length ) {
    event.preventDefault();
    $('html, body').stop().animate({
        scrollTop: target.offset().top
    }, 1000);
}

});

正如我所说的那样，如果这看起来像一个非常愚蠢的问题，那么我对编码很新，所以道歉！

感谢您的帮助！