title: Cannot create scroll effect on JavaScript
body: <p>I want to create a look that allows when a user press the "Scroll" button, the page will scroll with sliding effect. But it does not work on my page. I tried add with  tag to my html file but it does not work too.</p>
  
  <p>I found a script for that but it did not work. </p>
  
  <p>Where is my mistake?</p>
  
  <p><strong>home.html</strong></p>
  
  <pre><code>    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script  src="{% static 'js/home.js' %}"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="{% static 'css/home.css' %}"&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  .
  .
  .
      &lt;section id="section01" class="demo"&gt;
  
        &lt;h1&gt; Welcome to PHARSYS  &lt;/h1&gt;
        &lt;h2&gt;Scroll for Login or Signup&lt;/h2&gt;
  
        &lt;a href="#section02"&gt;&lt;span&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;/section&gt;
      &lt;section id="section02" class="demo"&gt;
        &lt;h1&gt;Login&lt;/h1&gt;&lt;br&gt;
          &lt;h2&gt;Press the button to log in to the system.
        &lt;br&gt;&lt;br&gt;
  
        &lt;/h2&gt;
        &lt;a href="#section03"&gt;&lt;span&gt;&lt;/span&gt;Scroll&lt;/a&gt;
      &lt;/section&gt;
      &lt;section id="section03" class="demo"&gt;
        &lt;h1&gt;Signup&lt;/h1&gt;
          &lt;h2&gt;Press the button to register to the system&lt;/h2&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p><strong>home.js</strong></p>
  
  <pre><code>$(function() {
    $('a[href*=#]').on('click', function(e) {
      e.preventDefault();
      $('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
    });
  });
  </code></pre>
  
  <p><strong>home.css</strong></p>
  
  <pre><code>@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
  * {
    margin: 0;
    padding: 0;
  }
  html, body {
    height: 100%;
  }
  section {
    position: relative;
    width: 100%;
    height: 100%;
  }
  section::after {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 80%;
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
  }
  section h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font : normal 300 64px/1 'Josefin Sans', sans-serif;
    text-align: center;
    white-space: nowrap;
  }
  
  section h2 {
    position: absolute;
    top: 65%;
    left: 50%;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font : normal 200 24px/1 'Josefin Sans', sans-serif;
    text-align: center;
    white-space: nowrap;
  }
  #section01 { background: url(https://picsum.photos/1200/800?image=575) center center / cover no-repeat;}
  #section02 { background: url(https://picsum.photos/1200/800?image=1016) center center / cover no-repeat;}
  #section03 { background: url(https://picsum.photos/1200/800?image=869) center center / cover no-repeat;}
  
  
  .demo a {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    color: #fff;
    font : normal 400 20px/1 'Josefin Sans', sans-serif;
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
  }
  .demo a:hover {
    opacity: .5;
  }
  
  #section01 a {
    padding-top: 60px;
  }
  #section01 a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
  }
  #section01 a span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
  }
  #section01 a span::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 0 rgba(255,255,255,.1);
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: sdb03 3s infinite;
    animation: sdb03 3s infinite;
    box-sizing: border-box;
  }
  @-webkit-keyframes sdb03 {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      box-shadow: 0 0 0 60px rgba(255,255,255,.1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes sdb03 {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      box-shadow: 0 0 0 60px rgba(255,255,255,.1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  
  
  
  #section02 a {
    padding-top: 60px;
  }
  #section02 a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
  }
  #section02 a span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
  }
  
  
  
  #section03 a {
    padding-top: 60px;
  }
  #section03 a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
  }
  #section03 a span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
  }
  #section03 a span::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 44px;
    height: 44px;
    box-shadow: 0 0 0 0 rgba(255,255,255,.1);
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: sdb03 3s infinite;
    animation: sdb03 3s infinite;
    box-sizing: border-box;
  }
  @-webkit-keyframes sdb03 {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      box-shadow: 0 0 0 60px rgba(255,255,255,.1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes sdb03 {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      box-shadow: 0 0 0 60px rgba(255,255,255,.1);
      opacity: 0;
    }
    100% {
      opacity: 0;
    }
  }
  </code></pre>