title: Scroll to anchor JS not working
body: <p>So what I try to achieve is as the title says. I've gone through quite many threads and websites so far, but just can not get it working.</p>
  
  <p>I can somehow see different scripts working when they have the time it takes to scroll editable. It just doesn't scroll smoothly, it jumps to the anchor after that time.</p>
  
  <p>What I am currently using:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function() {
      var hashTagActive = "";
      $(".scroll").click(function (event) {
          if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
              event.preventDefault();
              //calculate destination place
              var dest = 0;
              if ($(this.hash).offset().top &gt; $(document).height() - $(window).height()) {
                  dest = $(document).height() - $(window).height();
              } else {
                  dest = $(this.hash).offset().top;
              }
              //go to destination
              $('html,body').animate({
                  scrollTop: dest
              }, 2000, 'swing', function(){
                  hashTagActive = "";
              });
              hashTagActive = this.hash;
          }
      });
  });
  &lt;/script&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="navbar"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#1"&gt;Tervetuloa&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#2"&gt;Sivupohjia&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#3"&gt;Tilaa sivut&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="etusivu.html#4"&gt;Linkki&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="etusivu.html#5"&gt;Linkki&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="etusivu.html#6"&gt;Linkki&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="etusivu.html#7"&gt;Linkki&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="etusivu.html#8"&gt;Linkki&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="etusivu.html#9"&gt;Linkki&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="etusivu.html#10"&gt;Linkki&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="wrapper"&gt;
          &lt;div class="content_primary"&gt;
              &lt;a name="1" id="1"&gt;&lt;/a&gt;
              &lt;h3&gt;Tervetuloa&lt;/h3&gt;
              &lt;p&gt;Tekstiä&lt;/p&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="wrapper"&gt;
          &lt;div class="content_secondary"&gt;
              &lt;a name="2" id="2"&gt;&lt;/a&gt;
              &lt;h3&gt;Sivupohjia&lt;/h3&gt;
              &lt;p&gt;Tulossa&lt;/p&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="wrapper"&gt;
              &lt;div class="content_primary"&gt;
              &lt;a name="3" id="3"&gt;&lt;/a&gt;
              &lt;h3&gt;Tilaa&lt;/h3&gt;
              &lt;p&gt;Tekstiä&lt;/p&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
          &lt;p&gt;&amp;copy;&amp;nbsp;Marko&amp;nbsp;Ahola&lt;/p&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I simply have no idea where to go from here. I have no experience in this, I'm just a hobbyist. Any help is appreciated.</p>
  
  <p>I have the website running on a Raspberry PI and Apache2.  </p>