title: "Undefined is not a function" error jQuery, .replace, scrollTop
body: <p>This scroll function is not working... I don't think it can "find" the ids in my html, but I don't see why. I had an earlier version (which I didn't commit D:) which seemed to work just fine. I thought I had rewrote it the same way as before, but I guess not. </p>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function() {
  
  
  $(function() {
  $(".navlist").on("click", function() {
    $(".navlist").removeClass("active");
    $(this).addClass("active");
  });
  
  });
  
  function goToByScroll(id){
    // Remove "link" from the ID
    id = $(id).replace("link", "");
    // Scroll
    $('html,body').animate({
  scrollTop: $("#"+id).offset().top}, 'slow');
  
  }
  
  $(".navbar &gt; ul &gt; li &gt; a").click(function(e) { 
        // Prevent a page reload when a link is pressed
      e.preventDefault(); 
        // Call the scroll function
      goToByScroll($(this).attr("id"));           
  });
  
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
    &lt;ul class="nav navbar-nav" &gt;
      &lt;li class="navbar-brand"&gt;&lt;img width="100%" height="100%" src="sa.png"&gt;&lt;/li&gt;
      &lt;li class="navlist"&gt;&lt;a id ="homelink" href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navlist"&gt;&lt;a id = "portfoliolink" href="#"&gt;WORK&lt;/a&gt;&lt;/li&gt;
      &lt;li class="navlist"&gt;&lt;a id = "contactlink" href="#"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;section class="jumbotron_index"&gt; 
    &lt;p class= "scrollhome" id ="home"&gt; scroll to home &lt;/p&gt;
    &lt;div class="content"&gt; 
      &lt;h1&gt;  &lt;/h1&gt;
      &lt;h2&gt;  
        &lt;a href="" target="_blank"&gt;&lt;img width="2%" height="2%" src="gh.png"&gt;&lt;/a&gt;&lt;/h2&gt;
      &lt;h3&gt; &lt;/h3&gt; 
      &lt;p class= "scrollwork" id="portfolio"&gt; scroll to work &lt;/p&gt;  
    &lt;/div&gt;
  &lt;/section&gt;
  
  
  &lt;div class="container middle"&gt;
  //stuff here
  &lt;/div&gt;
  
  &lt;div class= "container bottom" id = "contact"&gt;
  //stuff here
  &lt;/div&gt;
  
  
  
  
  
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  </code></pre>