jQuery のanimateが動かない

jsファイルないの下記のanimateが動作しません。
文字色は赤になるのでclickfunction自体は動作していると思います。
全く見当もつかないです。

js
1$('#company').click(function() {
2    $("body").animate({
3      scrollTop:$('.company').offset().top
4    }, 300);
5    $(this).css('color', 'red');
6  });

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <link rel="stylesheet" href="css/styles.css">
8  <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
9  <title>Roim Corporation</title>
10</head>
11<body>
12<div class="snap-container">
13<header id="header" class="snap-child">
14  <ul class="header__menu">
15    <li id="company">COMPANY</li>
16    <li id="service">SERVICE</li>
17    <li id="news">NEWS</li>
18    <li id="contact">CONTACT</li>
19  </ul>
20</header>
21<section class="company snap-child">
22  <h2>COMPANY</h2>
23</section>
24<section class="service snap-child">
25  <h2>SERVICE</h2>
26</section>
27<section class="news snap-child">
28  <h2>NEWS</h2>
29</section>
30<section class="contact snap-child">
31  <h2>CONTACT</h2>
32</section>
33</div>
34<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
35<script src="js/styles.js"></script>
36</body>
37</html>

scss
1html {
2  font-size: 62.5%;
3}
4body {
5  text-decoration: none;
6  font-size: 1.6em;
7  font-family: 'Poppins','ヒラギノ角ゴ Pro W3','sans-serif';
8}
9body, ul, li ,h1, h2{
10  margin: 0;
11  padding: 0;
12  list-style: none;
13}
14.snap-container {
15  overflow: auto;
16  // scroll-snap-type: y mandatory;
17  height: 100vh;
18  .snap-child {
19    // scroll-snap-align: start;
20    height: 100vh;
21  }
22}
23header {
24  background:url(../img/header.jpg);
25  background-size: cover;
26  background-position: center;
27  transition: .3s;
28  display: flex;
29  flex-direction: column;
30  justify-content: center;
31  .header__menu {
32    margin: 0 auto;
33    li {
34      transition: .4s;
35      color:rgba(255, 255, 255, .4);
36      font-size: 4rem;
37      letter-spacing: 3px;
38      font-weight: bolder;
39      text-shadow:0px 0px 6px #fff;
40      cursor: pointer;
41    }
42  }
43}
44.company {
45  
46}
47.service {
48  height:100vh;
49  background-color: #555;
50}

行動規範の内容に同意します

回答1件

ベストアンサー

animateする要素がbodyではなく.snap-containerです。

JavaScript
1    $(".snap-container").animate({
2      scrollTop:$('.company').offset().top
3    }, 300);
4```**動くサンプル：**[https://jsfiddle.net/1kLb9z07/](https://jsfiddle.net/1kLb9z07/)