Having trouble getting one link to use scrollTo to a div and jumpy scrolling using scrollTo

Having trouble getting one link to use scrollTo to a div and jumpy scrolling using scrollTo

I've setup a small one page site. It's one long horizontal scrolling page. I'm using jQuery scrollto, to scroll the entire window to each specific div on the page. 

At the top of the page there's a menu of <li> but the very last one 'Thanks' in the list won't scroll to the corresponding div#thanks. For some reason it only every scrolls back the first div called div#faux-pas. Every id name I give it causes the same problem. 

Also when click the menu items at the top of the page, sometimes there's a split second jump before animating to the corresponding div.

Am I missing something glaringly obvious here?

This is the code
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
  2. <head>
  3. <title>Design Application Faux Pas &mdash; SansGil </title>
  4. <link href="css/style.css" rel="stylesheet" type="text/css">
  5. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  6. <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
  7. <script type="text/javascript" src="js/jquery.serialScroll-min.js"></script>
  8. <script type="text/javascript" >
  9. $(document).ready(function () {
  10. $("a.faux-pas-button").click(function () {
  11. $.scrollTo("div#faux-pas", 800 );
  12. });
  13. $("a.about-button").click(function () {
  14. $.scrollTo("div#about", 800 );
  15. });
  16. $("a.submit-button").click(function () {
  17. $.scrollTo("div#submit", 800 );
  18. });
  19. $("a.contact-button").click(function () {
  20. $.scrollTo("div#contact", 800 );
  21. });
  22. $("a.thanks-button").click(function () {
  23. $.scrollTo("div#thanks", 800 );
  24. });

  25. });
  26. </script>
  27. </head>
  28. <body>
  29. <script type="text/javascript">

  30. var _gaq = _gaq || [];
  31. _gaq.push(['_setAccount', 'UA-3527458-12']);
  32. _gaq.push(['_trackPageview']);

  33. (function() {
  34. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  35. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  36. (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  37. })();

  38. </script>
  39. <div id="wrapper">
  40. <div id="header">
  41. <h1 id="logo"><a href="http://hireme.sansgil.com"><span class="underline">Design Application</span> <span class="underline">&#8212;Faux Pas</span></a></h1>
  42. <ul id="nav">
  43. <h1>Menu</h1>
  44. <li><a href="#faux-pas" class="faux-pas-button button">&#8212;Faux Pas</a></li>
  45. <li><a href="#about" class="about-button button">&#8212;About</a></li>
  46. <li><a href="#submit" class="submit-button button">&#8212;Submit</a></li>
  47. <li><a href="#contact" class="contact-button button">&#8212;Contact</a></li>
  48. <li><a href="#thanks" class="thanks-button button">&#8212;Thanks</a></li>
  49. </ul>
  50. </div>
  51. <div id="content" class="cms-editable">
  52. <div id="faux-pas">
  53. <div id="container">
  54. <p class="faux-no">&#8212;Faux Pas: No. 1</p>
  55. <h2>Speaking in third person</h2>
  56. <h3>When writing copy for a biography there's nothing worse than speaking in third person. It makes you sound like you have a touch of personality disorder, egotism and very little grasp of the written word. Unless you're a fashion diva, best leave it out.</h3>
  57. </div>
  58. <div id="container">
  59. <p class="faux-no">&#8212;Faux Pas: No. 2 </p>
  60. <h2>Calling fuzzybunny63<br>
  61. @hotmail.com</h2>
  62. <h3>When you registered that email address five years ago after your favourite pet, it was cute and adorable. However it's only going to look embarrasing emailing your dream creative director using fuzzybunny63@hotmail.com. It looks anything but proffessional. </h3>
  63. </div>
  64. <div id="container">
  65. <p class="faux-no">&#8212;Faux Pas: No. 3 </p>
  66. <h2>Passion for fashion</h2>
  67. <h3>Avoid using passion too often if at all. Unfortunately it's just too over used on application letters. Just remember the cringe worthy phrase 'passion for fashion' and vauge to never use passion as an adjective again </h3>
  68. </div>
  69. <div id="container">
  70. <p class="faux-no">&#8212;Faux Pas: No. 4 </p>
  71. <h2>Address it right</h2>
  72. <h3>Make sure you get the name of the company and person the application is addressed right. Best to get things going on the right foot and know who you're speaking too.</h3>
  73. </div>
  74. <div id="container">
  75. <p class="faux-no">&#8212;Faux Pas: No. 5 </p>
  76. <h2>Socalising isn't an interest</h2>
  77. <h3>Everyone's seen it and probably had it on their CV at somepoint, those generic entries under activities and interest. Socalising included.</h3>
  78. </div>
  79. <div id="container">
  80. <p class="faux-no">&#8212;Faux Pas: No. 6 </p>
  81. <h2>Profile picture</h2>
  82. <h3>Really? I don't think this one needs explaining.</h3>
  83. </div>
  84. </div>
  85. <div id="about">
  86. <div id="container">
  87. <p class="faux-no">&#8212;About</p>
  88. <h2>What's this <br>
  89. all about?</h2>
  90. <h3>You've probably come across <em>Design Application Faux Pas</em> because you recently received an application or portfolio from me. As part of my application campaign, I wanted to showcases tidbits and observations that I come across, concluded or suggested by peers and colleagures when it comes to applying for jobs in the design industry.</h3>
  91. <h3> Hopefully you found the <em> faux pas </em>cringingly familiar or humours and you're now ready to invite me in for a chat. </h3>
  92. </div>
  93. </div>
  94. <div id="submit">
  95. <div id="container">
  96. <p class="faux-no">&#8212;Submit</p>
  97. <h2> Share a<br>
  98. faux pas </h2>
  99. <h3>If you've got a pet peeve<em> </em> you'd like to share, perhaps something you see on a weekly basis that really 'grinds youre gears', it'd be great to add it to this growing list. Submit your own <em>faux pas</em> to me at <a href="made@sansgil.com?subject=I saw your details on Design Application Faux Pas" onClick="javascript: pageTracker._trackPageview ('/outgoing/submit-email');">made@sansgil.com</a> and I'll put it up on <em>Design Application Faux Pas </em>along with a credit.<br>
  100. </h3>
  101. </div>
  102. </div>
  103. <div id="contact">
  104. <div id="container">
  105. <p class="faux-no">&#8212;Contact</p>
  106. <h2>Gil Cocker</h2>
  107. <h3>I'm a multidiscplinary designer looking for with over a years industry experience nationwide. I'm currently looking for my next exciting role in the design industry. With a proven track record and numerous glowing references I'd love to speak to you in more detail very soon.</h3>
  108. <h3>You can get in contact with me via phone on 07912 179 295 <br>
  109. or via email <a href="made@sansgil.com?subject=I saw your details on Design Application Faux Pas" onClick="javascript: pageTracker._trackPageview ('/outgoing/contact-emailed');">made@sansgil.com</a></h3>
  110. </div>
  111. </div>
  112. <div id="thanks">
  113. <div id="container">
  114. <p class="faux-no">&#8212;Thanks</p>
  115. <h2>You're a <br>
  116. keen one</h2>
  117. <h3>Thanks again for sparing me your valuable time and <br>
  118. I look forward to speaking with you very soon.</h3>
  119. <h3>&#8212;Gil Cocker</h3>
  120. </div>
  121. </div>

  122. </div>
  123. <div id="footer">
  124. <p>&copy; 2010 SansGil — All rights reserved. Design and build by <a href="http://sansgil.com" onClick="javascript: pageTracker._trackPageview ('/outgoing/sansgil.com');">SansGil.com</a>
  125. </div>
  126. </div>
  127. </body>
  128. </html>

Along with the css code

       
  1. @charset "UTF-8";
  2. /* CSS Document */

  3. /* Eric Meyers CSS Reset */

  4. html, body, div, span, applet, object, iframe,
  5. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  6. a, abbr, acronym, address, big, cite, code,
  7. del, dfn, em, font, img, ins, kbd, q, s, samp,
  8. small, strike, strong, sub, sup, tt, var,
  9. dl, dt, dd, ol, ul, li,
  10. fieldset, form, label, legend,
  11. table, caption, tbody, tfoot, thead, tr, th, td {
  12. margin: 0;
  13. padding: 0;
  14. border: 0;
  15. outline: 0;
  16. font-weight: inherit;
  17. font-style: inherit;
  18. font-size: 100%;
  19. font-family: inherit;
  20. vertical-align: baseline;
  21. }
  22. /* remember to define focus styles! */
  23. :focus {
  24. outline: 0;
  25. }
  26. body {
  27. line-height: 1;
  28. color: black;
  29. background: white;
  30. }
  31. ol, ul {
  32. list-style: none;
  33. }
  34. /* tables still need 'cellspacing="0"' in the markup */
  35. table {
  36. border-collapse: separate;
  37. border-spacing: 0;
  38. }
  39. caption, th, td {
  40. text-align: left;
  41. font-weight: normal;
  42. }
  43. blockquote:before, blockquote:after,
  44. q:before, q:after {
  45. content: "";
  46. }
  47. blockquote, q {
  48. quotes: "" "";
  49. }

  50. /* Setup the @fonts and any default values */


  51. p, h1, h2, h3 {
  52. font-family: Georgia, "Times New Roman", Times, serif;
  53. font-size: 11px;
  54. }

  55. body {
  56. background-color:white;
  57. }

  58. a {
  59. color: #7A7A7A;
  60. border-bottom: dotted 1px;
  61. text-decoration:none;
  62. }

  63. a:hover {
  64. border: 0px;
  65. }


  66. /* Positional stuff */

  67. #wrapper {
  68. width: 8800px;
  69. }

  70. #container {
  71. width: 550px;
  72. float: left;
  73. margin-left: 290px;
  74. }

  75. #faux-pas, #contact, #about, #submit {
  76. float: left;
  77. }
  78. #content {
  79. margin-top: 160px;
  80. }

  81. #footer {
  82. width: 200px;
  83. clear: left;
  84. left: 40px;
  85. top: 580px;
  86. position: absolute;
  87. }

  88. h1#logo {
  89. position: absolute;
  90. width: 220px;
  91. top: 40px;
  92. left: 40px;
  93. }

  94. /* for browsers that support fixed property */

  95. body>div#wrapper>div#footer, body>div#wrapper>div#header>h1#logo { position: fixed; }



  96. /* Typography and styling */

  97. h1 {
  98. font-family: Helvetica, Arial, sans-serif;
  99. font-size: 22px;
  100. font-weight: bold;
  101. line-height: 36px;
  102. }

  103. h1 span.underline {
  104. border-bottom: solid 5px;
  105. font-family: Helvetica, Arial, sans-serif;
  106. }

  107. h2 {
  108. font-size: 72px;
  109. margin-bottom: 45px;
  110. font-weight: bold;
  111. font-style: italic;
  112. }

  113. h3 {
  114. font-size: 18px;
  115. line-height: 22px;
  116. color: #7A7A7A;
  117. font-family: Helvetica, Arial, sans-serif;
  118. padding-bottom: 12px;
  119. }

  120. #footer p, #footer a {
  121. color: #999;
  122. line-height: 16px;
  123. }

  124. #footer a {
  125. text-decoration: none;
  126. border-bottom: dotted 1px;
  127. }

  128. #footer a:hover {
  129. border-bottom: 0px;
  130. }

  131. em {
  132. font-style: italic;
  133. }

  134. .faux-no {
  135. text-transform: uppercase;
  136. letter-spacing: 2px;
  137. margin-bottom: 5px;
  138. }

  139. /* Nav */

  140. #nav {
  141. position: absolute;
  142. width: 400px;
  143. left: 285px;
  144. top: 36px;
  145. }

  146. body>div#wrapper>div#header>ul#nav { position: fixed; }

  147. li {
  148. display: inline;
  149. font-family: Georgia, "Times New Roman", Times, serif;
  150. font-size: 18px;
  151. }

  152. li a {
  153. border-bottom: dotted 1px;
  154. text-decoration: none;
  155. color: #666;
  156. }

  157. ul {
  158. padding: 5px;
  159. }

  160. /* Button Classes */

  161. .button {
  162. font-family: Helvetica, Arial, sans-serif;
  163. font-size: 14px;
  164. font-weight:bold;
  165. color: black;
  166. margin-right: 10px;
  167. border: 0px;
  168. line-height: 36px;
  169. }

  170. .button:hover {
  171. border-bottom: solid 5px;
  172. }

  173. .navselected {
  174. border-bottom: solid 5px;
  175. }

  176. h1#logo a {
  177. color: black;
  178. text-decoration: none;
  179. }