Scroller une page par simple click

Soyez le premier à donner votre avis sur cette source.

Vue 5 004 fois - Téléchargée 733 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

jjDai

Messages postés: 291
Date d'inscription: vendredi 21 février 2003
Statut: Membre
Dernière intervention: 13 mars 2015

13 juin 2013 à 20:13

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

@karamel

Messages postés: 1783
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 2 avril 2021

123
12 juin 2013 à 23:36

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

jjDai

Messages postés: 291
Date d'inscription: vendredi 21 février 2003
Statut: Membre
Dernière intervention: 13 mars 2015

11 juin 2013 à 15:54

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

@karamel

Messages postés: 1783
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 2 avril 2021

123
11 juin 2013 à 15:01

j'ai testé le zip c'est une tres bonne approche

Signaler

@karamel

Messages postés: 1783
Date d'inscription: vendredi 9 mai 2008
Statut: Modérateur
Dernière intervention: 2 avril 2021

123
11 juin 2013 à 13:02

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.

Scroller une page par simple click

Description

Source / Exemple :

Conclusion :

Codes Sources

A voir également

Vous n'êtes pas encore membre ?

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

Du même auteur (@karamel)

Generateur d'exagramme de yi king yi jin

Barre de progression d'une page controlable

Image marker annotation

Menu fixe apres scroll

Contenu retractable

Source / Exemple :

Conclusion :

A voir également

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Du même auteur (@karamel)

Generateur d'exagramme de yi king yi jin

Barre de progression d'une page controlable

Image marker annotation

Menu fixe apres scroll

Contenu retractable

Vous n'êtes pas encore membre ?

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