ScrollTo, position de départ
Bonjour à tous,
Alors voilà, j'utilise ScrollTo pour faire un scroll vertical lors du clic sur l'un des éléments de mon menu.
Ici le but est d'avoir une version anglais et une version francaise. Lors du clic sur French, la page scroll vers le bas, si c'est anglais vers le haut.
Mais pour cela il faut que le div du choix des langues soit au centre et donc affiché par défaut à la hauteur de celui-ci.
Or je ne trouve aucune option de scrollTo permettant de le faire...
Pouvez-vous m'aider ?
Voici mon code pour l'instant :
Code:
1
2
3
4
5
6
7
8
9
| /*
NAVIGATION
-----------------------------------------------------------------*/
nav { position:fixed; top:20px; right:20px; z-index:9999; }
/*
ARTICLES
-----------------------------------------------------------------*/
article { height:1000px; width:800px; margin:0 auto; } |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!-- JQUERY -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<!-- START CONTAINER -->
<nav id="navigation">
<ul>
<li><a href="#french">French</a></li>
<li><a href="#home">Home</a></li>
<li><a href="#english">English</a></li>
</ul>
</nav>
<article id="french">
<h1>French</h1>
<p>Cras id metus nec turpis rhoncus volutpat et dignissim ipsum.Nunc fermentum mauris bibendum odio volutpat facilisis. Proin eu mattis metus. Quisque a elementum lacus. Phasellus lobortis, lorem a fermentum hendrerit, metus risus lacinia nisi, sagittis accumsan turpis ante non mi? Cras id metus nec turpis rhoncus volutpat et dignissim ipsum.</p>
</article>
<article id="home">
<h1>Home</h1>
<!-- Le choix de la langue ici -->
</article>
<article id="english">
<h1>English</h1>
<p>Nunc fermentum mauris bibendum odio volutpat facilisis. Proin eu mattis metus. Quisque a elementum lacus. Phasellus lobortis, lorem a fermentum hendrerit, metus risus lacinia nisi, sagittis accumsan turpis ante non mi?.</p>
</article>
<!-- END CONTAINER --> |
Code:
1
2
3
4
5
6
| $(document).ready(function() {
$("#navigation a").click(function() {
$.scrollTo($(this).attr("href"), "slow");
return false;
});
}); |
Un grand merci :
