Fixed scrolling issue with Safari 6.

It works now with with all new browsers on my Mac i.e.:
- Safari 6
- Firefox
- Chrome
- Opera

assets/javascripts/script.coffee

@@ -11,6 +11,8 @@ jQuery ->
     slider.goToNextSlide()
     return false
 
+  $("a.what").scrollTo('#what', 3000)
+
   filterPath = (string) ->
     string.replace(/^\//,'')
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
@@ -30,7 +32,7 @@ jQuery ->
     return []
 
   locationPath = filterPath(location.pathname)
-  scrollElem = scrollableElement('html', 'body')
+  scrollElem = scrollableElement('html', 'body', 'div#banner-container')
 
   $('a[href*=#]').each ->
     thisPath = filterPath(this.pathname) || locationPath
@@ -41,6 +43,8 @@ jQuery ->
         targetOffset = target.offset().top
         $(this).click (event) ->
           event.preventDefault()
-          $(scrollElem).animate
-            scrollTop: targetOffset, 400, ->
-              location.hash = targetID
+          $.scrollTo target, 1000, ->
+            location.hash = targetID
+          # $(scrollElem).animate
+          #   scrollTop: targetOffset, 400, ->
+          #     location.hash = targetID

assets/javascripts/script.js

@@ -13,6 +13,7 @@
       slider.goToNextSlide();
       return false;
     });
+    $("a.what").scrollTo('#what', 3000);
     filterPath = function(string) {
       return string.replace(/^\//, '').replace(/(index|default).[a-zA-Z]{3,4}$/, '').replace(/\/$/, '');
     };
@@ -35,7 +36,7 @@
       return [];
     };
     locationPath = filterPath(location.pathname);
-    scrollElem = scrollableElement('html', 'body');
+    scrollElem = scrollableElement('html', 'body', 'div#banner-container');
     return $('a[href*=#]').each(function() {
       var target, targetID, targetOffset, thisPath;
       thisPath = filterPath(this.pathname) || locationPath;
@@ -46,9 +47,7 @@
           targetOffset = target.offset().top;
           return $(this).click(function(event) {
             event.preventDefault();
-            return $(scrollElem).animate({
-              scrollTop: targetOffset
-            }, 400, function() {
+            return $.scrollTo(target, 1000, function() {
               return location.hash = targetID;
             });
           });

assets/stylesheets/screen.css

@@ -50,6 +50,11 @@ body {
   width: 100%;
   height: 120px; }
 
+/* Little hack to scroll to top */
+#top {
+  margin-top: -111px;
+  min-height: 111px; }
+
 #header-container {
   height: 96px;
   border-bottom: 15px solid #00408c;

assets/stylesheets/screen.scss

@@ -40,6 +40,12 @@ body {
   height: 120px;
 }
 
+/* Little hack to scroll to top */
+#top {
+    margin-top: -111px;
+    min-height: 111px;
+}
+
 .divider{
 }
 

index.html

@@ -71,9 +71,9 @@
     <!-- TODO: Add offer/product markup
          http://wiki.goodrelations-vocabulary.org/Quickstart 
     -->
+    <div id="top"></div>
 
     <header id="header-container" class="clearfix">
-      <div id="top"></div>
       <div class='wrapper'>
         <a id='logo' href="#top">
           <img src="/assets/images/logo_white.png" 
@@ -95,7 +95,6 @@
         </nav>
       </div>
     </header>
-
     <div id="banner-container" class="clearfix">
       <div class='wrapper'>
         <h1>
@@ -468,6 +467,7 @@ <h3 class="copyright"> Kowalski Consulting &#xA9; 2012</h3>
     <script src="/assets/javascripts/libs/jquery-1.7.2.min.js"></script>
     <script src="/assets/javascripts/libs/jquery.tipTip.js"></script>
     <script src="/assets/javascripts/libs/jquery.bxSlider.min.js"></script>
+    <script src="/assets/javascripts/libs/jquery.scrollTo-1.4.3.1-min"></script>
     <script src="/assets/javascripts/script.js"></script>
 
   </body>