Scroller une page par simple click

Soyez le premier à donner votre avis sur cette source.

Vue 4 589 fois - Téléchargée 658 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
@karamel
Messages postés
1743
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
16 janvier 2020
 52 -
voici un lien pour tester

http://scriptevol.toile-libre.org/scriptsite/scrollpage/pagescroll.html
Signaler
-
Il semblerait qu'il ne fonctionne pas sous IE.
Signaler
@karamel
Messages postés
1743
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
16 janvier 2020
 52 -
c'est parce que le script utilise getElmementByClassName qui n'est reconnu par ie qu'a partir d'ie9
Signaler
@karamel
Messages postés
1743
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
16 janvier 2020
 52 -
du coup j'ai abandonné getElmementByClassName afin qu'il fonctionne avec ie 8 et j'ai aussi fait en sorte que le bandeau soit crée dynamiquement afin d’évité d’insérer le menu dans la partie html
Signaler
jjDai
Messages postés
291
Date d'inscription
vendredi 21 février 2003
Statut
Membre
Dernière intervention
13 mars 2015
 -
Super, je cherchais justement q faire un truc dan le m^me genre et je ne m'en sortais pas.
Dommage que ça fonctionne pas sous ie, est-ce que quelqu'un aurait des pistes pour le faire sous ie.
JJDai
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)