Question sur la fonction scroll to

Hello,

Pour un site one page je souhaite utiliser une fonction scroll to, par exemple celle trouver sur cet excellent site :

http://www.creativejuiz.fr/blog/les-tutoriels/jquery-effet-smooth-scroll-defilement-fluide



Mon souci c'est que l'effet fait défiler ma page non pas jusqu'au haut de mon div, mais le fait juste apparaître (ce qui veut dire qu'une grande partie de ma div située au-dessus reste visible)

Que manque-t-il à mon code pour faire défiler jusqu'à rendre "invisible" la div du dessus ?

Un bout du code HTML :

<div id="header">
<div class="wide">
<h1>...</h1>
<ul>
<li><a href="#" title="">...</a></li>
<li><a href="#secondary" title="">Secondary</a></li>
<li><a href="#" title="">...</a></li>
</ul>
</div>
</div> <!-- End of #header -->

<div id="main">
<div class="wide">
<h2>...</h2>
<ul>
<li class="mainItem"><a href="#" title=""><img src="img/1.png" alt="" title="" /></a></li>
<li class="mainItem"><a href="#" title=""><img src="img/1.png" alt="" title="" /></a></li>
<li class="mainItem"><a href="#" title=""><img src="img/1.png" alt="" title="" /></a></li>
<li class="mainItem fourColumns"><a href="#" title=""><img src="img/1.png" alt="" title="" /></a></li>
<li class="mainItem"><a href="#" title=""><img src="img/1.png" alt="" title="" /></a></li>
<li class="mainItem"><a href="#" title=""><img src="img/1.png" alt="" title="" /></a></li>
<li class="mainItem"><a href="#" title=""><img src="img/1.png" alt="" title="" /></a></li>
<li class="mainItem fourColumns"><a href="#" title=""><img src="img/1.png" alt="" title="" /></a></li>
</ul>
<div class="clearfix"></div>
</div>
</div> <!-- End of #main -->

<div id="secondary">
<div class="wide">
<h2>...</h2>
<div class="left">
<p>Eo adducta re per Isauriam.</p>
<p>Eo adducta re per Isauriam.</p>
<p>Eo adducta re per Isauriam.</p>
</div>
<div class="right"><img src="img/2.png" alt="" title="" /></div>
</div>
</div> <!-- End of #secondary -->

Une partie du CSS

/* ==========
   General
   ========== */

body {
    background: url("../img/bg.png") repeat scroll 0 0 #EEE;
	font-family: Arial, Helvetica, FreeSans, sans-serif;
	font-size: 76%;
}
.wide {
    width: 96%;
    max-width: 950px;
    margin: 0 auto;
}
.clearfix {
    clear: both;
}

/* ==========
   Layout
   ========== */

/* Header */

#header h1 {
    float: left;
    padding-top: 35px;
    font-family: 'Lobster13Regular', Arial, Helvetica, FreeSans, sans-serif;
    font-size: 4em;
    text-shadow: 0 1px #92D6F2;
}
#header ul {
    float: right;
    padding-top: 60px;
}
#header ul li {
    display: inline;
    padding-left: 50px;
}

/* Main */

#main {
    padding: 40px 0 20px 0;
    background: none repeat scroll 0 0 #EEE;
}
.mainItem {
    float: left;
    width: 23.5%;
    margin: 0 2% 2% 0;
}
.mainItem img {
    max-width: 100%;
}
.fourColumns {
    margin-right: 0;
}

/* Main */

.left {
    float: left;
    width: 56%;
    margin-right: 2%;
}
.right {
    float: right;
    width: 42%;
}
.right img {
    max-width: 100%;
}

Modifié par jd-webdesign (09 Jan 2012 - 13:54)