Scroller une page par simple click

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

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)