1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Navigation
  5. Scroller une page par simple click

Scroller une page par simple click

Soyez le premier à donner votre avis sur cette source.

Vue 4 788 fois - Téléchargée 726 fois

Télécharger le projet
Commenter

Description

il s'agit d'une barre se trouvant en haut de la page ideale pour un smartphone et qui permet de naviguer dans une page par simple click soit on fait defiler page par page soit on fait defiler section par section la barre a aussi en cliquant au centre un menu glisant qui affiche toutes les sections de la page et il suffit de cliquer sur une des sections pour y etre directement dirigé

le script fonctionne par un système de div qui prennent toute la largeur de la page la longueur elle est quelconque chaque div corresponds a une section dans laquelle on y insert son contenu c'est la seul contrainte après cela on met autant de section que l'on veut.

pour finir j'ai fait en sorte que tout se fasse automatiquement on insert ou retire des sections a souhait sans rien modifier et j'ai fait en sorte que sa puisse s'adapter automatiquement a la taille de l'ecrant

Source / Exemple : 


//-------------------------------------------------------------
//  Nom Document : scrollpage
//  Auteur       : kazma (Kamel A)
//  Objet        : defilement de page  http://www.javascriptfr.com/
//  Création     : 01.06.2013
//-------------------------------------------------------------
//  Mise à Jour  : 
//-------------------------------------------------------------

var kdeme={

sens:0,
inter:0,
vitesse:0,
generale:null,
elem:0,
elnav:null,
ctn:null,
tbel: new Array,
men:0,
diff:0,

//fonction pour le controle de la position du scroll

marchar:function(){

		var elem=kdeme.elnav.getElementsByTagName('span');

		var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop;
		
		var hauteur_reel=0;

		for (var i=0;i<kdeme.tbel.length;i++){
			
			var elem_height=kdeme.tbel[i].clientHeight;
			
			hauteur_reel+=elem_height;
			
			if(hauteur_scroll<hauteur_reel && hauteur_scroll>=hauteur_reel-elem_height){
				
				kdeme.men=i;
				break;
			}
		}
		
		for (var i=0;i<elem.length;i++){

			if(elem[i].style.color!='black' && elem[kdeme.men] != elem[i]){

				elem[i].style.color='black';

				break;
			}
		}
		elem[kdeme.men].style.color='#15aaff';
	},

	
	
	//fonction qui initialise les elements pour le scroll automatique 
	
	
kasco:function (arg){

		clearInterval(kdeme.inter);

		var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop;

		kdeme.elem=kdeme.tbel[arg];
		
		if(arg=='pagea'){
			kdeme.diff=document.documentElement.offsetHeight-80;
		}
		
		else if(arg=='pager'){
			kdeme.diff=-document.documentElement.offsetHeight+80;
		}
		
		else{
			kdeme.diff=kdeme.elem.offsetTop - hauteur_scroll;
		}
		
		kdeme.sens=(kdeme.diff > 0 ? 'plus' : 'moins');

		kdeme.vitesse=Math.round(Math.abs(kdeme.diff/25));

		kdeme.inter=setInterval(kdeme.kasca,20);
		kdeme.retour()
	},

	// la fonction qui effectue le scroll 
	
kasca:function(arg){

		var ddl=(navigator.vendor) ? document.body : document.documentElement;

		var hauteur_scroll=ddl.scrollTop || document.body.scrollTop;

		if(kdeme.sens=='plus'){

			if(kdeme.diff-kdeme.vitesse<=0){

				ddl.scrollTop+=(kdeme.diff);
				clearInterval(kdeme.inter);
				
				return false;
			}

			ddl.scrollTop+=kdeme.vitesse;
			kdeme.diff-=kdeme.vitesse
		}

		else {

			if(kdeme.diff+kdeme.vitesse>=0){

				ddl.scrollTop-=Math.abs(kdeme.diff);
				clearInterval(kdeme.inter);
				
				return false;
			}

			ddl.scrollTop-=kdeme.vitesse;
			kdeme.diff+=kdeme.vitesse
		}

	},

suite:function(){

		if(kdeme.men < kdeme.tbel.length-1){
			kdeme.kasco(kdeme.men+1)
		}

	},

preced:function(){

		if(kdeme.men > 0){
			kdeme.kasco(kdeme.men-1)
		}
	},

deb:function(){
		
		kdeme.kasco(0)
		
	},

fin:function(){
		
		kdeme.kasco(kdeme.tbel.length-1)
		
	},
	
	
	//fonctions pour la monté et descente du bandeau
	
	
aller:function(){

		var nume=kdeme.general;
		if(nume.offsetTop+10>=0){
			nume.style.top=0+'px';
			kdeme.ctn.onclick=kdeme.retour;
			return false;
		}
		nume.style.top=nume.offsetTop+10+'px';
		setTimeout(kdeme.aller,10);
	},

retour:function(){

		var nume=kdeme.general;

		if(nume.offsetTop-10<=-(nume.offsetHeight)){
			nume.style.top=-nume.offsetHeight+'px';
			kdeme.ctn.onclick=kdeme.aller;
			return false;
		}
		nume.style.top=nume.offsetTop-10+'px';
		setTimeout(kdeme.retour,10);
	},

	
	//creation du bandeau et tout ce qu'il contient
	
	
init:function(){

	var elem3=document.body.getElementsByTagName('div');
	
	for (var i=0;i<elem3.length;i++){

		if(elem3[i].parentNode.tagName=='BODY'){
			kdeme.tbel.push(elem3[i]);
		}

	}
	
	kdeme.general=document.createElement('div');
	kdeme.general.setAttribute('class','masthead')
	
	kdeme.elnav=document.createElement('nav');
	kdeme.elnav.setAttribute('class','scrollnav')
	
	
	//remplacement getelementByClassName pour pouvoir supporter ie8 //////////////
	
	var classel=document.body.getElementsByTagName('*');
		var tab= new Array
		
		for (var j=0;j<classel.length;j++){
		
		if(classel[j].className=='ktitre'){
				
		tab.push(classel[j]);
		}
		}
		
		for (var i=0;i<tab.length;i++){

		var il=document.createElement('span');
		var txt=tab[i].firstChild.nodeValue;
		var t=document.createTextNode(txt);
		il.appendChild(t);
		il.setAttribute('onclick','kdeme.kasco('+i+')');
		kdeme.elnav.appendChild(il);
		}
		
	///////////////////	
		
		
	kdeme.general.appendChild(kdeme.elnav)
	
	
	var btt= ['kdeme.suite()','kdeme.kasco("pagea")','kdeme.fin()','kdeme.aller()','kdeme.deb()','kdeme.kasco("pager")','kdeme.preced()']
	var btu= ['res/suiv.png','res/psa.png','res/end.png','res/ctr.png','res/start.png','res/psr.png','res/preced.png']
	
	
	var elemx=document.createElement('div');
	elemx.setAttribute('class','touche')
	
		for (var i=0 ;i<7 ;i++){
		
		var elem2=document.createElement('img');
		i<3 ? elem2.setAttribute('class','kbg') :elem2.setAttribute('class','kbd')
		
		if(i==3){
		elem2.setAttribute('class','contenu')
		kdeme.ctn=elem2
		}
		
		elem2.src=btu[i]
		elem2.setAttribute('onclick',btt[i]);
		elemx.appendChild(elem2)
	}
	kdeme.general.appendChild(elemx)
	document.body.appendChild(kdeme.general)
	kdeme.general.style.top=-kdeme.general.offsetHeight+'px';

	typeof window.addEventListener == 'undefined' ? attachEvent("onscroll",kdeme.marchar) : document.addEventListener("scroll",kdeme.marchar, false);
		
	kdeme.marchar();
}

}

typeof window.addEventListener == 'undefined' ? attachEvent("onload",kdeme.init) : addEventListener("load",kdeme.init, false);

Conclusion :


tout a fait
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Signaler
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
ok merci.
J'ai mis ça un peu de côté, car j'ai eu une urgence, mais je m'y re-penche ce weekend.
JJDai
Signaler
Messages postés
1769
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 octobre 2020
 106
par contre il faudra faire attention car j'ai renommé les icônes afin qu'ils soient plus explicite et quand au bouton central quand on clic il revient c’était un oublie quand au décalage j'ai l'impression que c'est du aux dimensions de la barre de scroll qui n'est pas pris en compte par les navigateur
Signaler
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
ok pour les boutons, c'était un peu dans mon idée in fine:
j'ai mis un autre zip avec un adaptation pour un tableau:
http:// jubile.fr/_jjd/scrp/scroll-page-vertical-tbl.zip

J'ai modifier l'approche de recherche des sections.
En gros j'ajoute un attribut section au balise TD que je veux définir comme une section.
C'est nickel, et du coup c'est peut-être plus facile à adapter pour d'autres cas.

J'ai toujours mon décalage a propos de la liste des liens quand on clique sur le bouton central, mais ta modif corrige peut être le défaut, je répercute tes modifs chez moi pour voir.

JJDai
Signaler
Messages postés
1769
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 octobre 2020
 106
j'ai testé le zip c'est une tres bonne approche
Signaler
Messages postés
1769
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 octobre 2020
 106
je vient de modifier la source pour que chaque bouton est sa propre class comme ca on les organise comme on veut et si on ne veut pas d'un bouton on le met en display none

"Peux-tu me confirmer que le défilement par section est calculé par la hauteur du div de la section"

oui c'est sa je prend la position de la barre de scroll puis celle du div dans la page je fait une soustraction ce qui me donne la distance a parcourir
Afficher les 22 commentaires
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)