title: jquery css Smooth scroll between sections with different backgrounds
body: <p>I'm trying to do smooth scroll between parts of my page. Basicly my aim is to have similar effect like here: <a href="http://diablomedia.com/" rel="nofollow">http://diablomedia.com/</a>
  So far: I have the menu, different backgrounds, i'm able to navigate, got smooth scroll from here: <a href="http://css-tricks.com/snippets/jquery/smooth-scrolling/" rel="nofollow">http://css-tricks.com/snippets/jquery/smooth-scrolling/</a> but the background is problem... it's just... not smooth, I can't explaint it more clearly so I just paste some of my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;xxx&lt;/title&gt;
  
  &lt;style type="text/css"&gt;
  html {
      background: #1d1d1d;
  }
  
  body {
      margin: 0;
      padding: 0;
      font: 10px normal Verdana, Arial, Helvetica, sans-serif;
      background: #1d1d1d;
  }
  
  h1 {
      font: 4.7em normal Georgia, 'Times New Roman', Times, serif;
      color: #fff;
      margin: 0;
      text-align: center;
      padding: 5px 0;
  }
  
  h1 small {
      font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
      text-transform: uppercase;
      letter-spacing: 1.4em;
      display: block;
      color: #ccc;
  }
  
  .container {
      width: 100%;
      height: 80px;
      position: fixed;
      margin: 0 0 0 0;
      overflow: hidden;
      top: 0px;
      background: rgba(29, 29, 29, 0.85);
      z-index: 100;
  }
  
  .main_content1 {
      width: 100%;
      height: 1200px;
      display: block;
      position: relative;
      background:
          url("http://www.mega-tapety.info/resize/sztuka-tapety3d-1600-1200-3422.jpg")
          no-repeat fixed 50% 0 #FFFFFF;
      position: relative;
      display: block;
  }
  
  .main_content2 {
      width: 100%;
      height: 1200px;
      display: block;
      position: relative;
      background:
          url("http://www.tapety.nja.pl/images/wallpapers/26335506/Widoki/Niebo/17.jpg")
          no-repeat fixed 50% 0 #FFFFFF;
      position: relative;
  }
  
  .main_content3 {
      width: 100%;
      height: 1200px;
      display: block;
      position: relative;
      background:
          url("http://i.pinger.pl/pgr496/a03b8c70001f8f5d490da42f/pobrano-z-tapety.pinger.pl-29.jpg")
          no-repeat fixed 50% 0 #FFFFFF;
      position: relative;
  }
  
  .main_content4 {
      width: 100%;
      height: 1200px;
      display: block;
      position: relative;
      background:
          url("http://www.mega-tapety.info/wallpapers/krajobrazy/morzairzeki/390_4500_3.jpg")
          no-repeat fixed 50% 0 #FFFFFF;
      position: relative;
  }
  
  .main_content5 {
      width: 100%;
      height: 1200px;
      display: block;
      position: relative;
      background:
          url("http://i.pinger.pl/pgr448/ca9845940015a295490d848a/pobrano-z-tapety.pinger.pl-1D.jpg")
          no-repeat fixed 50% 0 #FFFFFF;
      position: relative;
  }
  
  .main_content6 {
      width: 100%;
      height: 1200px;
      display: block;
      position: relative;
      background:
          url("http://i.pinger.pl/pgr188/5b715190002669eb490d8488/pobrano-z-tapety.pinger.pl-1C.jpg")
          no-repeat fixed 50% 0 #FFFFFF;
      position: relative;
  }
  
  .main_content7 {
      width: 100%;
      height: 1200px;
      display: block;
      position: relative;
      background: url("http://skkf.net/pulpity/7tapeta.jpg") no-repeat fixed
          50% 0 #FFFFFF;
      position: relative;
  }
  
  .main_content8 {
      width: 100%;
      height: 1200px;
      display: block;
      position: relative;
      background:
          url("http://zdjecia-fotografia.com/wp-content/uploads/2011/01/tapety-na-pulpit-samochody3.jpg")
          no-repeat fixed 50% 0 #FFFFFF;
  }
  
  .text_container {
      width: 80%;
      position: absolute;
      margin-left: 10%;
      margin-top: 80px;
  }
  
  img {
      border: none;
  }
  
  ul#topnav {
      margin: 0 0 0 18%;
      padding: 0;
      list-style: none;
      font-size: 1.1em;
      clear: both;
      float: left;
      width: 60%;
      padding: 0;
  }
  
  ul#topnav li {
      margin: 0;
      padding: 0;
      overflow: hidden;
      float: left;
      height: 40px;
  }
  
  ul#topnav a,ul#topnav span {
      padding: 10px 20px;
      float: left;
      text-decoration: none;
      color: #fff;
      text-transform: uppercase;
      clear: both;
      height: 20px;
      line-height: 20px;
  }
  
  ul#topnav a {
      color: #7bc441;
  }
  
  ul#topnav span {
      display: none;
  }
  &lt;/style&gt;
  &lt;script type="text/javascript"
      src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document)
              .ready(
                      function() {
  
                          $("#topnav li").prepend("&lt;span&gt;&lt;/span&gt;"); //Throws an empty span tag right before the a tag
  
                          $("#topnav li").each(function() { //For each list item...
                              var linkText = $(this).find("a").html(); //Find the text inside of the a tag
                              $(this).find("span").show().html(linkText); //Add the text in the span tag
                          });
  
                          $("#topnav li").hover(function() { //On hover...
                              $(this).find("span").stop().animate({
                                  marginTop : "-40" //Find the span tag and move it up 40 pixels
                              }, 250);
                          }, function() { //On hover out...
                              $(this).find("span").stop().animate({
                                  marginTop : "0" //Move the span back to its original state (0px)
                              }, 250);
                          });
  
                          function filterPath(string) {
                              return string.replace(/^\//, '').replace(
                                      /(index|default).[a-zA-Z]{3,4}$/, '')
                                      .replace(/\/$/, '');
                          }
                          var locationPath = filterPath(location.pathname);
                          var scrollElem = scrollableElement('html', 'body');
  
                          $('a[href*=#]')
                                  .each(
                                          function() {
                                              var thisPath = filterPath(this.pathname)
                                                      || locationPath;
                                              if (locationPath == thisPath
                                                      &amp;&amp; (location.hostname == this.hostname || !this.hostname)
                                                      &amp;&amp; this.hash.replace(/#/,
                                                              '')) {
                                                  var $target = $(this.hash), target = this.hash;
                                                  if (target) {
                                                      var targetOffset = $target
                                                              .offset().top;
                                                      $(this)
                                                              .click(
                                                                      function(
                                                                              event) {
                                                                          event
                                                                                  .preventDefault();
                                                                          $(
                                                                                  scrollElem)
                                                                                  .animate(
                                                                                          {
                                                                                              scrollTop : targetOffset
                                                                                          },
                                                                                          1000,
                                                                                          function() {
                                                                                              location.hash = target;
                                                                                          });
                                                                      });
                                                  }
                                              }
                                          });
  
                          // use the first element that is "scrollable"
                          function scrollableElement(els) {
                              for ( var i = 0, argLength = arguments.length; i &lt; argLength; i++) {
                                  var el = arguments[i], $scrollElement = $(el);
                                  if ($scrollElement.scrollTop() &gt; 0) {
                                      return el;
                                  } else {
                                      $scrollElement.scrollTop(1);
                                      var isScrollable = $scrollElement
                                              .scrollTop() &gt; 0;
                                      $scrollElement.scrollTop(0);
                                      if (isScrollable) {
                                          return el;
                                      }
                                  }
                              }
                              return [];
                          }
                      });
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;h1&gt;
              &lt;small&gt;Navatar.pl&lt;/small&gt;
          &lt;/h1&gt;
          &lt;br /&gt;
          &lt;ul id="topnav"&gt;
              &lt;li&gt;&lt;a href="#1"&gt;Dojedź szybciej&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#2"&gt;mCB&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#3"&gt;Pogadaj ze znajomymi&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#4"&gt;Check-in&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#5"&gt;Xplore&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#6"&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#7"&gt;Cos&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;&lt;a href="#8"&gt;Jeszcze&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="main_content1" id="1"&gt;&lt;/div&gt;
      &lt;div class="main_content2" id="2"&gt;&lt;/div&gt;
      &lt;div class="main_content3" id="3"&gt;&lt;/div&gt;
      &lt;div class="main_content4" id="4"&gt;&lt;/div&gt;
      &lt;div class="main_content5" id="5"&gt;&lt;/div&gt;
      &lt;div class="main_content6" id="6"&gt;&lt;/div&gt;
      &lt;div class="main_content7" id="7"&gt;&lt;/div&gt;
      &lt;div class="main_content8" id="8"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I know it looks awful but I'm still learning :)</p>