title: Smooth scrolling jQuery doesn't work - Cannot read property 'top' of undefined
body: <p>I have spent hours trying to figure why it doesn't work. Basically I just want the scrolling on my page to be smooth.</p>
  
  <p>Here is my code:</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-js lang-js prettyprint-override"><code>$(document).ready(function() {
      var scrollLink = $('.option-name');
      scrollLink.click(function(e){
          e.preventDefault();
          let linkRef = $(this).attr('href');
          let position = $(linkRef).offset().top;
       $('html, body').animate({
        scrollTop : position
        }, 500)
      })
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;header&gt;
      &lt;div class="my-name-header"&gt;
          &lt;img src="people.png" class="astro-man-header"&gt;
          &lt;h2&gt;Itzik Shaoulian&lt;/h2&gt;
      &lt;/div&gt;
      &lt;div class="nav-options"&gt;
          &lt;nav&gt;
              &lt;ul class="list-options"&gt;
                  &lt;li class="option-name"&gt;&lt;a href="#main-opening" class="nav-content"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="option-name"&gt;&lt;a href="#about-content" class="nav-content"&gt;About&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="option-name"&gt;&lt;a href="#portfolio-content" class="nav-content"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="option-name"&gt;&lt;a href="#skills-content" class="nav-content"&gt;Skills&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="option-name"&gt;&lt;a href="#contact-content" class="nav-content"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="option-name"&gt;&lt;a href="#" class="resume-header" class="nav-content"&gt;Resume&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>