Site web et scrolling vertical

**Doppleganger** · 21/02/2013, 15h17

Bonjour, j'aimerais mettre en place sur mon site web, un effet de scrolling, lorsque je clique sur un lien pour me diriger vers un ID de la page.

J'ai trouvé d'innombrable javascript permettant d'éffectuer cette manoeuvre.

Cependant, aucun n'as fonctionné dans mon cas, car en examinant et en essayant de comprendre comment fonctionnais ces scripts, ils étaient tous incapable de me redirigé vers l'ID que je voulais, ou en tout cas, pas avec l'effet de scrolling.

http://www.hostingpics.net/viewer.ph...reenBlabla.jpg

Voilà la gueule du truc, en gros, la plupart des scripts font en sorte que le scrolling s'effectue sur la page, alors que moi, tout se passe dans le petit encadré qui possède une scrollbar.
Je voudrais cliquer sur un des mots en gras, et qu'il m’emmène vers les paragraphes inférieurs.

Voilà, si quelqu'un avait une piste pour m'aider à me sortir de cette situation.
Et mes capacités en javascript ne sont pas à la hauteur pour tenter une modification des scripts que je possède...

**CosmoKnacki** · 21/02/2013, 17h12

Bonjour,

Tu ne donnes pas suffisament d'éléments pour qu'on puisse t'aider.
Si tu ne veux pas dévoiler les informations top-secrètes de ton futur site, je te conseille:

1) choisi un script parmi ceux que tu as pu trouver. En général ceux-ci sont agrémentés de démos donnant une idée du rendu, ce qui te permettra de faire ton choix
2) essai de l'implémenter sur une version simplifiée de ta page en changeant les "informations personnelles" au passage, pour voir si déjà ça fonctionne
3) Si ça ne fonctionne pas, donnes-nous les éventuelles erreurs affichées et surtout ton code, car avec une copie d'écran on ne peut rien faire

**Doppleganger** · 21/02/2013, 17h33

Voilà le 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
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
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="fr" />
<link href="style.css"	title="Défaut" rel="stylesheet" type="text/css" media="screen" />
 
<title>Titre</title>
 
<!--------------------- Chargement de tout le javascript, attention les yeux! ------------------------------>
<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" src="scriptaculous/src/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="linkToFade.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">      <!-- étant donné que je me sert de la librairie jQuery et prototype en meme temps, ce dispositif me permet d'utiliser les deux -->
        jQuery.noConflict();
        jQuery('#jquery').addClass('jquery');
 
 
        $('prototype').addClassName('prototype');
    </script>
<script type="text/javascript" src="tinyscrolling/tinyscrolling.js"></script>
<script type='text/javascript' language='javascript'>
	  Event.observe(window,'load', 
	    function () {
	      $('page').hide();
	      new Effect.Appear('page');
	      initiateLinkToFade();
	    }  
	  );
	</script>
 
 
 
 
	<div class="blackboard"> <!-- Il s'agit de l'intégralité du tableau dans lequel les textes sont affichés -->
 
<?php 
include_once ("Haut de page.html"); /* Ici je fais appel à la baniere et au menus qui sont placés à gauche, ainsi lorsque je désire les modifier je n'ai qu'à modifier le fichier les concernant, car à la base le site devait contenir plusieurs pages.*/
include_once ("Menus.html");
?>
 
<body>
 
<div class="cadre_milieu">
<div id="page">
 
 
<div class="contenu_milieu">
<div class="polaroidME">
<img src="images/PolaroidCollegeRESIZEDV2.png">
</div>
 
<div id="acceuil">
Premier paragraphe contenant une description sommaire et dont le contenus importe peu
</div>
 
<div class="separateur"></div>
 
 
<div id="SEGPA">
<div class="punaisegreen"><img src="images/punaisegreenRESIZED.png"></div> <!-- les classes polaroides et punaises sont deux div, qui sont censés représenter une image avec un effet polaroide, ces images accompagne charque article -->
<div class="polaroid">
<img src="images/banniere2RESIZED.jpg">
DEuxieme paragraphe contenant un article dont le contenu importe peu
</div>
 
<div class="separateur"></div>
 
<div id="nonfranco">
<div class="punaisegreen"><img src="images/punaisegreenRESIZED.png"></div>
<div class="polaroid">
<img src="images/globePays.jpg">
<p> Classe non francophone </p>
</div>
 
Troisieme paragraphe patatipatata
 
 
</div>
 
 
 
 
 
 
 
 
 
</div>
</div> 
</div>
 
 
<?php
include_once ("gallery.html"); <!-- ici il s'agit d'une galerie d'image situé en bas à gauche du site -->
?>
 
</div>
</html>

Le code du menu

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<div id="menu_gauche"> <div id="case_menu" >1ere Catégorie </div>
					<ul>
								<li>	<a href="#acceuil"id="case_menu"> BLA BLA</a> </li>
								<li >	<a href ="#SEGPA"  id="case_menu"> SEGPA</a> </li>								
								<li>	<a href="#nonfranco" id="case_menu"> non-Francophone</a> </li>
 
					</ul>
 
        </div>

Le javascript que j'utilise pour le scrolling

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
/* Tiny Scrolling - a smooth navigation between internal links and their destinations
by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/tiny-scrolling
based on the works by Travis Beckham and Brian McAllister.
                v0.3 - March 27, 2006
*/
 
window.onload = function() {
	tinyScrolling.init();
	}
 
var tinyScrolling = {
	speed : 1,      //set here the scroll speed: when this value increase, the speed decrease. 
	maxStep: 500,	 //set here the "uniform motion" step for long distances
	brakeK: 1,		 //set here the coefficient of slowing down
	hash:null,		
	currentBlock:null,
	requestedY:0,
	init: function() {
			var lnks = document.getElementsByTagName('a');   
			for(var i = 0, lnk; lnk = lnks[i]; i++) {   
				if ((lnk.href && lnk.href.indexOf('#') != -1) &&  ( (lnk.pathname == location.pathname) ||
				('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {  
				lnk.onclick = tinyScrolling.initScroll;   		
				}   
			}
	},
	getElementYpos: function(el){
			var y = 0;
			while(el.offsetParent){  
				y += el.offsetTop    
				el = el.offsetParent;
			}	return y;
	},		
	getScrollTop: function(){
			if(document.all) return (document.documentElement.scrollTop) ? document.documentElement.scrollTop : document.body.scrollTop;
			else return window.pageYOffset;   
	},	
	getWindowHeight: function(){
			if (window.innerHeight)	return window.innerHeight;
			if(document.documentElement && document.documentElement.clientHeight) return document.documentElement.clientHeight;
	},
	getDocumentHeight: function(){
			if (document.height) return document.height;
			if(document.body.offsetHeight) return document.body.offsetHeight;
	},
	initScroll: function(e){
			var targ;  
			if (!e) var e = window.event;
			if (e.target) targ = e.target;
			else if (e.srcElement) targ = e.srcElement;   
			tinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length); 
			tinyScrolling.currentBlock = document.getElementById(tinyScrolling.hash);   
			if(!tinyScrolling.currentBlock) return;
			tinyScrolling.requestedY = tinyScrolling.getElementYpos(tinyScrolling.currentBlock); 
			tinyScrolling.scroll();  
			return false;
	},
	scroll: function(){
			var top  = tinyScrolling.getScrollTop();
			if(tinyScrolling.requestedY > top) {  
				var endDistance = Math.round((tinyScrolling.getDocumentHeight() - (top + tinyScrolling.getWindowHeight())) / tinyScrolling.brakeK);
				endDistance = Math.min(Math.round((tinyScrolling.requestedY-top)/ tinyScrolling.brakeK), endDistance);
				var offset = Math.max(2, Math.min(endDistance, tinyScrolling.maxStep));
			} else { var offset = - Math.min(Math.abs(Math.round((tinyScrolling.requestedY-top)/ tinyScrolling.brakeK)), tinyScrolling.maxStep);
			} window.scrollTo(0, top + offset);  
			if(Math.abs(top-tinyScrolling.requestedY) <= 1 || tinyScrolling.getScrollTop() == top) {
				window.scrollTo(0, tinyScrolling.requestedY);
				if(!document.all || window.opera) location.hash = tinyScrolling.hash;
				tinyScrolling.hash = null;
			} else 	setTimeout(tinyScrolling.scroll,tinyScrolling.speed);
	}		
}

Voilà, s'il manque des choses n'hésiter pas à me prévenir, je travail sur ce dysfonctionnement depuis plusieurs heures, enfin, travail, j'essaie de trouver une méthode qui puisse s'appliquer à mon cas.

**CosmoKnacki** · 21/02/2013, 18h40

Ok! Avant de me plonger (me noyer?) plus profond dans ton code, juste une petite remarque:

Tu as besoin de 3 effets javascript (s'il y en a d'autre, n'hésites pas à le signaler):
1- le fadein fadeout des pages entre-elles
2- sûrement d'un bidule de galerie d'images/gestion de miniature machin chose
3- du fameux effet de smooth scroll

Or ces trois effets peuvent être réaliser avec jquery seul et ses éventuels plugins. (et fort probablement avec scriptaculous seul ou autre librairie, et évidement sans librairie du tout)
Pourquoi alors charger 25 framewôks différents? Bien que jquery puisse se régler en "noConfict" pour permettre, de manière ô combien magnanime, aux autres scripts de fonctionner, mieux vaut éviter autant que faire ce peux d'utiliser des frameworks différents.

Après une recherche rapide, j'ai trouvé:
-- http://www.onextrapixel.com/2010/02/...e-transitions/
-- http://www.creativejuiz.fr/blog/tuto...ilement-fluide

Je regarde ton code de plus prés, à bientot.

**Doppleganger** · 21/02/2013, 19h00

Oui c'est un peu le bordel :p Heureusement que j'ai fait des includes d'autres pages :p

Euh car j'ai choppé ces bout de codes sur des tutoriaux, et chacun avait sa sauce :/

**CosmoKnacki** · 21/02/2013, 20h50

Avant d'attaquer la partie javascript, tu devrais regarder ton code html/css et vérifier les points suivants:

- choisir une DTD
- les balises <head>, <body>
- indentation du code (par exemple 4 espaces à chaque niveau)
- la fermeture des balises, les chevauchements éventuels
- choisir les balises en fonction de leur contenu ( <h1> à <h6> pour les titres à la place de <div>, <p> à la place de <div> pour les paragraphes )
- supprimer les balises inutiles (ne pas encadrer x fois le même contenu, ça doit se régler avec les CSS)
- choisir une convention de nommage des classes et id
- doit on utiliser une classe ou une id?

La liste n'est pas exhaustive, l'idée est la rigueur et la réflexion à tous les niveaux possibles. Ça peut sembler rebutant, mais ce n'est pas pharaonique, ça évite bien des déboires et au final ça fait gagner du temps.
À ta place, je ne chercherai pas à placer un quelconque javascript sur un code html bancal (idem pour le css). C'est le croutage quasi assuré, un coup à se retrouver coincé toute une après-midi!

Bon courage

Site web et scrolling vertical

JavaScript

Vue hybride

Discussions similaires

Partager

Partager