ScrollTo, position de départ

**vbaguet** · 20/04/2013, 17h57

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(document).ready(function() {
	$("#navigation a").click(function() {
		$.scrollTo($(this).attr("href"), "slow");
		return false;
	});
});

Un grand merci :

**danielhagnoul** · 20/04/2013, 22h17

Bonsoir

Sans le plugin, donc sans animation :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$( function(){
 
	$( "#navigation a" ).click( function(){
		var href = $( this ).attr( "href" );
 
		$( "html, body" ).scrollTop( $( href ).offset().top );
 
		return false;
	});
 
});
 
$( window ).load( function(){
 
	$( "html, body" ).scrollTop( $( "#home" ).offset().top );
 
});

**vbaguet** · 21/04/2013, 12h24

Merci ça fonctionne parfaitement !

ScrollTo, position de départ [Plugin]

jQuery

Vue hybride

Discussions similaires

Partager

Partager