title: Change Content or Include File Without Refreshing Page
body: <p>I've a menu and a content div. Content div is not displaying. When user clicks a menu item, content div shows and page smooth scrolls to top of the content div. Here is my code:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;div id="section1"&gt;
          &lt;a id="bir" href="#icerikBaslik"&gt;1&lt;/a&gt; &lt;!-- This --&gt;
          &lt;a id="iki"&gt;2&lt;/a&gt;
          &lt;a id="uc"&gt;3&lt;/a&gt;
          &lt;a id="dort"&gt;4&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="icerikDiv"&gt;
          &lt;h1 id="icerikBaslik"&gt;Deneme&lt;/h1&gt;
          &lt;p&gt;Random content&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When user clicks "a id 1, (commented by This)" #icerikDiv shows and page scrolls. With this jQuery methods:</p>
  
  <pre><code>  $('html, body').animate({
      scrollTop: $(selector).offset().top
    }, 1000);    
  };
  
  $(document).on('click', '#content a', function () {
      $('#icerikDiv').show();
      scrollToElement($(this).attr('href'));
  });
  </code></pre>
  
  <p>So that's it for a menu item. Question is, I don't want to lose smooth scrolling and because of that I don't want page to be refreshed.</p>
  
  <p>When user clicked another link, content of #icerikDiv must be changed. Page will still scroll to #icerikDiv but content will be different. This is what I want.</p>
  
  <p>And if possible, I want to keep content datas in php files. Like "menu1.php", "menu2.php" etc.</p>
  
  <p>When user clicks a link, can I include related php file into #icerikDiv without refreshing page?</p>
  
  <p>I thought about:</p>
  
  <ul>
  <li>Give every link a specific method</li>
  <li>Inside them, show #menuXcontent and scroll to #menuXcontent</li>
  <li>Write down all content in same page, display:none;</li>
  <li>For example when clicked menu6 link, show #menu6content and scroll to it</li>
  </ul>
  
  <p>But I didn't like this. I'm sure there is a better way.</p>