ScrollTo : comment ça marche ?

**sami_c** · 07/06/2010, 19h38

Bonjour,
Dans une page qui contient un long texte, j'ai inséré plusieurs anchors, et à gauche j'ai un menu figé avec des liens qui pointent vers ces anchors. Je voudrais faire un effet de smooth scroll , j'ai trouvé le plugin ScrollTo mais j'ai pas compris comment ça marche !!
http://flesler.blogspot.com/2007/10/...scroll-10.html
http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Voici à peu près mon code :

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
18
<body>
<div id="nav"> 
 <h1>. services</h1>
 <h1>. design</h1>
 <h1>. clients</h1>
</div> 
 
<div id="contenu">
 <h1><a name="services" id="services"></a>. Services</h1>
 bla bla bla bla 
 
 <h1><a name="design" id="design"></a>. Design</h1>
 bla bla bla bla 
 
 <h1><a name="clients" id="clients"></a>. Clients</h1>
 bla bla bla bla 
</div>
</body>

**danielhagnoul** · 10/06/2010, 00h45

Bonsoir.

Exemple :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<meta name="description" content="Page type">
	<title>Page type</title>
	<style>
		/* BASE */
		body {
			background-color:#ffffff;
			color:#000000;
			font-family:sans-serif;
			font-size:medium;
			font-style:normal;
			font-weight:normal;
			line-height:normal;
			letter-spacing:normal;
		}
		h1,h2,h3,h4,h5 {
			font-family:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
		#contenu1 {
			width:400px;
			height:auto;
			margin-top:1200px;
			padding:6px;
			background-color:whiteSmoke;
			border:2px solid red;
		}
		#contenu2 {
			width:400px;
			height:auto;
			margin-top:2400px;
			padding:6px;
			background-color:whiteSmoke;
			border:2px solid green;
		}
		p.top {
			color:blue;
			font-size:2em;
		}
	</style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>	
 	<script>
		$(function(){
			$("#titre1").click(function(){
				$("html, body").animate({scrollTop: $("#contenu1").offset().top}, 3000);
			});
 
			$("#titre2").click(function(){
				$("html, body").animate({scrollTop: $("#contenu2").offset().top}, 3000);
			});
 
			$("p.top").click(function(){
				$("html, body").animate({scrollTop: "0px"}, 3000);
			});
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<h1 id="titre1">Titre un</h1>
		<h1 id="titre2">Titre deux</h1>
		<div id="contenu1">
			<p>Un mot pour remplir</p>
			<p class="top">Monter</p>
		</div>		
		<div id="contenu2">
			<p>Un mot pour remplir</p>
			<p class="top">Monter</p>
		</div>		
	</div>
</body>  
</html>

**geforce** · 24/08/2010, 11h48

Ok, Merci pour l'exemple il est très instructif.

vue que je suis un débutant en JQuery
je me demandé quel est l'utiliser d'un plugin (ScrollTo) s'il est aussi facile de réalisée son équivalent ?

Quel sont les avantage d'utilisé un plugin (tel que ScrollTo) ? (vu qu'il est plus difficile à mettre en place)

Cordialement
GeForce

ScrollTo : comment ça marche ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager