title: Buttons on Header don't scroll to desired section by clicking
body: <p>I am finishing a website from a Udemy course project and followed all the steps but i still have a problem. I want the two buttons on my Website to scroll to the desired section by clicking on them. The buttons: "I'm Hungry" should bring me to the "Plans" and "Show me More" should bring me to the section "Features".</p>
  
  <p>The link to the website is <a href="http://omnifood.lavaspace.de" rel="nofollow noreferrer">http://omnifood.lavaspace.de</a>
  You can view the source code or inspect with developer tools.</p>
  
  <p>First part of HTML</p>
  
  <pre><code>     &lt;div class="hero-text-box"&gt;
  
              &lt;h1&gt; Goodbye junk food. &lt;br&gt; Hello super healthy meals. &lt;/h1&gt;
              &lt;a class="btn btn-full js--scroll-to-plans" href="#" &gt; I'm hungry &lt;/a&gt;
              &lt;a class="btn btn-ghost js--scroll-to-start" href="#"&gt; Show me more &lt;/a&gt;
  
  
  
          &lt;/div&gt;
  
  
      &lt;/header&gt;
  
      &lt;section class="section-features js--section-features" id="features"&gt;
          &lt;div class="row"&gt;
  </code></pre>
  
  <p>and this HTML section</p>
  
  <pre><code>    &lt;section class="section-plans js--section-plans" id="plans"&gt;
          &lt;div class="row"&gt;
              &lt;h2&gt;Start eating healthy today&lt;/h2&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here are the concerning CSS parts</p>
  
  <pre><code>     /* BUTTONS */
  
      .btn:link,
      .btn:visited,
      input[type=submit]{
          display: inline-block;
          padding: 10px 30px;
          font-weight: 300;
          text-decoration: none;
          border-radius: 200px;
          transition: background-color 0.2s, border 0.2s, color 0.2s;
  
      }
      .btn-full,
      .btn-ghost {
          margin-top: 3px;
          margin-bottom: 3px;
      }
  
  
  
      .btn-full:link,
      .btn-full:visited,
      input[type=submit]{
  
          background-color: #e67e22;
          border: 1px solid #e67e22;
          color: #fff;
          margin-right: 15px;
  
  
      }
  
      .btn-ghost:link,
      .btn-ghost:visited {
  
          border: 1px solid #e67e22;
          color: #e67e22;
      }
  
      .btn:hover,
      .btn:active,
      input[type=submit]:hover,
      input[type=submit]:active {
          background-color: #cf6d17;
  
  
  
      }
  
      .btn-full:hover,
      .btn-full:active,
      input[type=submit] {
  
          border: 1px solid #cf6d17;
  
  
      }
  
      .btn-ghost:hover,
      .btn-ghost:active {
  
          border: 1px solid #cf6d17;
          color: #fff;
  
  
      }
  
      .hero-text-box {
          position: absolute;
          width: 1140px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
  
  
  
      }
  
       .section-plans {
          background-color: #f4f4f4;
  
  
      }
  
       .section-features .long-copy  {
          margin-bottom: 30px;
  
  
      }
  </code></pre>
  
  <p>And here's the Javascript Code which should be commanding the buttons to scroll to the section. I pasted all, because there might be some conflicts between JS functions, causing the scroll not to work.</p>
  
  <pre><code>        /* STICKY NAVIGATION */
  
  
          $(document).ready(function() {
  
  
              $('.js--section-features').waypoint(function(direction){
                  if(direction == "down"){
                      $('nav').addClass('sticky');
                  }else{
                      $('nav').removeClass('sticky');
                  }
              }, {
                  offset: '120px;'
              });
  
  
          /* SCROLL BUTTONS */
  
  
  
  
              $('.js--scroll-to-plans').click(function (){
              $('html, body').animate({scrollTop: $('.js--section-plans').offset().top}, 1000);
          });
  
              $('.js--scroll-to-start').click(function (){
                  $('html, body').animate({scrollTop: $('.js--section-features').offset().top}, 1000);
              });
  
          });  
  
  
  
  
  
          $('a[href*="#"]').on('click',function(e) {
           e.preventDefault();
           var target = this.hash;
           var $target = $(target);
           $('html, body').stop().animate({
            'scrollTop': $target.offset().top
           }, 900, 'swing', function () {
            window.location.hash = target;
           });
          });                      
  
          // Select all links with hashes
          $('a[href*="#"]')
            // Remove links that don't actually link to anything
            .not('[href="#"]')
            .not('[href="#0"]')
            .click(function(event) {
              // On-page links
              if (
                location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
                &amp;&amp; 
                location.hostname == this.hostname
              ) {
                // Figure out element to scroll to
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                // Does a scroll target exist?
                if (target.length) {
                  // Only prevent default if animation is actually gonna happen
                  event.preventDefault();
                  $('html, body').animate({
                    scrollTop: target.offset().top
                  }, 1000, function() {
                    // Callback after animation
                    // Must change focus!
                    var $target = $(target);
                    $target.focus();
                    if ($target.is(":focus")) { // Checking if the target was focused
                      return false;
                    } else {
                      $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
                      $target.focus(); // Set focus again
                    };
                  });
                }
              }
            });
  
  
  
          /* ANIMATIONS ON SCROLL */
  
  
          $('.js--wp-1').waypoint(function(direction) {
              $('.js--wp-1').addClass('animated fadeIn')
  
  
          }, {
              offset: '50%'
          });
  
          $('.js--wp-2').waypoint(function(direction) {
              $('.js--wp-2').addClass('animated fadeInUp')
  
  
          }, {
              offset: '50%'
          });
  
          $('.js--wp-3').waypoint(function(direction) {
              $('.js--wp-3').addClass('animated fadeIn')
  
  
          }, {
              offset: '50%'
          });
  
          $('.js--wp-4').waypoint(function(direction) {
              $('.js--wp-4').addClass('animated pulse')
  
  
          }, {
              offset: '50%'
          });
  
          /* MOBILE MENU */
  
          $('.js--nav-icon').click(function(){
              var nav =$('.js--main-nav');
              var icon = $('.js--nav-icon');
  
              nav.slideToggle(200);
              if (icon.hasClass('ion-navicon-round')) {
                  icon.addClass('ion-close-round');
                  icon.removeClass('ion-navicon-round');
  
              }   else { 
                  icon.addclass('ion-navicon-round');
                  icon.removeClass('ion-close-round');
  
  
              }
  
  
  
  
          });
  
          /* MAPS */
  
          var map = new GMaps({
                el: '#map',
                lat: -12.043333,
                lng: -77.028333
              });
  </code></pre>