Javascript Jquery滚动到元素不会设置我的滚动动画

Jquery代码在开始时从未设置滚动动画，它只是传送到我分配给它的元素。 HTML代码：

        <div class="inner cover">
        <h1 class="cover-heading">Steampunk :: New vision</h1>
        <p class="lead">Steampunk :: New Vision is a Steampunk style RTS game developed by ATMOX.</p>
        <p class="lead">
          <a href="#Information" class="btn btn-lg btn-secondary">Learn more</a>
        </p>
      </div>

---

您面临一个问题，因为您没有添加Jquery，因为该anchot正在执行其默认操作。i、 e跳转到目标元素

以下是最新的答案

在您的scroll.js$（document）.ready（）中不正确，应该正确

   $(document).ready(function(){
    $('a[href="#Information"]').on('click', function(event) {
    var target = $(this.getAttribute('href'));
    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 4000);
    }
    });
});

第二个问题是，您需要使用jquery.slim.min.js覆盖jquery.min.js库，它并没有很多功能，包括动画

从index.html中删除这两行

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>

/*
*全球的
*/
#测试容器{
高度：1000px；
宽度：100%；
背景色：透明；
}
.段{
字号：18px；
左边距：30px；
右边距：30px；
}
margin20先生{
右边距：20px；
}
.填充15{
右侧填充：15px；
}
.人头类{
宽度：100%；
高度：60px；
背景色：#2b2b；
}
/* */
.标题类{
填充顶部：10px；
左边距：20px；
浮动：左；
}
/*链接*/
A.
答：焦点，
a:悬停{
颜色：#fff；
}
/*自定义默认按钮*/
.btn中学，
.btn辅助：悬停，
.btn次要：焦点{
颜色：#333；
文本阴影：无；
/*阻止从“body”继承*/
背景色：#fff；
边框：.05rem实心#fff；
}
/*
*基础结构
*/
html，
身体{
身高：100%；
背景图片：url（“Images/xvLjyle.jpg”）；
高度：500px；
背景附件：固定；
背景重复：无重复；
}
桌子
th，
运输署{
边框：1px纯黑；
}
身体{
颜色：#fff；
文本对齐：居中；
文本阴影：0.05rem.1rem rgba（0,0,0,5）；
}
/*用于表格样式垂直和水平居中的额外标记和样式*/
.网站包装{
显示：表格；
宽度：100%；
身高：100%；
/*至少对Firefox来说是这样*/
最小高度：100%；
-webkit盒阴影：插入0 0 5rem rgba（0,0,0,5）；
长方体阴影：插入0 0 5rem rgba（0,0,0,5）；
}
.站点包装器内部{
显示：表格单元格；
垂直对齐：顶部；
}
.盖上容器{
右边距：自动；
左边距：自动；
}
/*间距填充*/
.内部{
填充：2rem；
边缘顶端：40px；
}
/*
*标题
*/
桅顶{
边缘底部：2rem；
}
.报头品牌{
页边距底部：0；
}
.导航杆头.导航链接{
右边距：40px；
填充：.400；
字体大小：粗体；
颜色：rgba（255、255、255、.5）；
背景色：透明；
边框底部：.25rem实心透明；
}
.导航杆头.导航链接：悬停，
.导航杆头.导航链接：焦点{
边框底色：rgba（255、255、255、.25）；
}
.nav报头.导航链接+.nav链接{
左边距：1 em；
}
.导航杆头。激活{
颜色：#fff；
边框底色：#fff；
}
@介质（最小宽度：48em）{
.报头品牌{
浮动：左；
}
.导航桅杆{
浮动：对；
}
}
/*
*掩护
*/
.掩护{
填充：0.1.5雷姆；
}
.cover.btn lg{
填充：.75雷姆1.25雷姆；
字体大小：粗体；
}
/*
*页脚
*/
马蹄铁{
颜色：rgba（255、255、255、.5）；
}
/*
*粘贴并居中
*/
@介质（最小宽度：40em）{
/*拉出页眉和页脚*/
桅顶{
位置：固定；
排名：0；
}
马蹄铁{
位置：固定；
底部：0；
}
/*开始垂直定心*/
.站点包装器内部{
垂直对齐：中间对齐；
}
/*处理宽度*/
马士德先生，
马斯特福特先生，
.盖上容器{
宽度：100%；
/*水平对齐必须为百分比或像素*/
}
}
@介质（最小宽度：62em）{
马士德先生，
马斯特福特先生，
.盖上容器{
宽度：42rem；
}
}

蒸汽朋克：新视野
蒸汽朋克：新视野
蒸汽朋克：新视野是由ATMOX开发的蒸汽朋克风格的RTS游戏



关于游戏
-以及它的开发者

你能提供一个复制的例子吗？这对我来说很好，我怎么做到的？你用了哪个浏览器？我使用了Chrome和Firefox，只是想问一下，万一这可能是个问题：）JS代码是在元素解析后运行的吗？（即，在文档准备好的处理程序中，和/或出现在锚点之后的脚本元素中？）如果不这样做，它将不起作用。您可以创建fiddle/SO代码段。我用铬做了测试。这里的提琴评论是不为延长讨论；这段对话已经结束了。是的，这很有效。谢谢@Deep，谢谢你花时间帮助我@里克杰勒玛：很高兴我能帮上忙

   $(document).ready(function(){
    $('a[href="#Information"]').on('click', function(event) {
    var target = $(this.getAttribute('href'));
    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 4000);
    }
    });
});

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>