title: Placing and calling javascript function in html
body: <p>I'm a noob at javascript and this may be a dumb question, but I wrote a simple javascript function to slide to specific elements on a webpage.
  Here's the code: <a href="http://jsfiddle.net/bhbTr/" rel="nofollow">http://jsfiddle.net/bhbTr/</a></p>
  
  <p>However, when I attempt to put the javascript and html in a single html file, it doesn't seem to work. Here's what I have:</p>
  
  <p>
  </p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Test&lt;/title&gt;
      &lt;link rel='stylesheet' id='css' href='style1.css' type='text/css' media='all'&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;&gt;
      function goToByScroll(id){
            // Remove "link" from the ID
              id = id.replace("link", "");
              var off = $("#"+id).offset().top - 50;
            // Scroll
              $('html,body').animate({
                  scrollTop: off},
                  '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"));           
          });
  
      $("#navbar &gt; a").click(function(e) { 
            // Prevent a page reload when a link is pressed
              e.preventDefault(); 
            // Call the scroll function
              goToByScroll($(this).attr("id"));           
          });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;!-- Begin Wrapper --&gt;
      &lt;div id="wrapper"&gt;
          &lt;div class="navbar" id="navbar"&gt;
              &lt;a href="#" id="WhoWeArelink" class="navbarlogo"&gt;Test&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a id = "WhoWeArelink" href="#"&gt;Who We Are&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a id = "WhatWeDolink" href="#"&gt;What We do&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a id = "OurWorklink" href="#"&gt;Our Work&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a id = "Contactlink" href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="contentcontainer"&gt;
              &lt;div class="WhoWeAre" id="WhoWeAre"&gt;
                  &lt;p class="header"&gt;uck&lt;/p&gt;
                  &lt;p class="info"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="WhatWeDo"id="WhatWeDo"&gt;
                  &lt;p class = "header"&gt;Projects&lt;/p&gt;
                  &lt;p class="info"&gt;Projects&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="OurWork" id="OurWork"&gt;
                  &lt;p class = "header"&gt;Resume&lt;/p&gt;
                  &lt;p class="info"&gt;Resume&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="Contact" id="Contact"&gt;
                  &lt;p class = "header"&gt;Contact&lt;/p&gt;
                  &lt;p class="info"&gt;Contact&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End Wrapper --&gt;
  &lt;!-- Begin Footer --&gt;
  &lt;div class="footer"&gt;
          &lt;p style="text-align:center;"&gt;Some bullshit copyright (c) insert year here&lt;/p&gt;
  &lt;/div&gt;
  &lt;!-- End Footer --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>I can't figure out what I did wrong, but I suspect it has something to do with the functions not being called by the links. I'd really appreciate it if anyone had any suggestions</p>