IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

<a href> non valide sur page Scrollto


Sujet :

jQuery

  1. #1
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut <a href> non valide sur page Scrollto
    Bonsoir à tous,
    J'ai sur une "page Scrollto" un lien non actif; et pour cause, la cible ne se trouve pas dans la balise "container" comme l'exige le JQuery.
    Pour des raisons de "mise en page", la cible se trouve/doit se trouver dans le header.
    Quelqu'un a t'il l'idée d'un script afin que le lien :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <section class="btn center"><a href="#video">
    <button class="btn btn-1 btn-1a">enter</button></a>
    </section></div>
    accède à la div suivante :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="video"></div>
    Voici le body au complet :
    Code html : 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
    <audio autoplay>
    <source src="audio/song.ogg" type="audio/ogg">
    <source src="audio/song.mp3" type="audio/mp3">
    </audio>
     
    <div id="header">
       <div class="content">
        <ul class="bmenu">
          <li><a href="#section-un">About</a></li>
          <li><a href="#section-deux">Illustrations</a></li>
          <li><a href="#section-trois">Photography</a></li>
          <li><a href="#section-quatre">Web Design</a></li>
          <li><a href="#section-cinq">Personal Projects</a></li>
          <li><a href="#section-six">Contact</a></li>
        </ul></div>
     
    <div id="video"></div>
     
    <header class="headermobile mobile col-12">
      <button id="releaseMenu" ></button>
    <nav class="menu menumobile">
      <a href="#section-deux" class="menubutton">Blue</a>
      <a href="#section-trois" class="menubutton">Blue</a>
      <a href="#section-quatre" class="menubutton">Blue</a>
      <a href="#section-cinq" class="menubutton">Blue</a>
      <a href="#section-six" class="menubutton">Blue</a>
      </nav>
        </div><!-- #content -->
    </div><!-- #header -->
     
    <div id="container">
     
    <div id="section-un">
        <div class="menu" id="menu">
        <a href="#section-deux" class="menubutton">Green</a>
        <a href="#section-trois" class="menubutton">Blue</a>
        <a href="#section-quatre" class="menubutton">Blue</a>
        <a href="#section-cinq" class="menubutton">Blue</a>
        <a href="#section-six" class="menubutton">Blue</a>
    </div>
     
    <div id="section-deux"></div>
    <div id="section-trois"></div>
    <div id="section-quatre">
     
    <section class="btn center"><a href="#video">
    <button class="btn btn-1 btn-1a">intro</button></a>
    </section></div>
     
    </div>
    Merci pour votre aide et bon week-end,
    dh

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 240
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 240
    Points : 15 542
    Points
    15 542
    Par défaut
    et quel est le code JavaScript qui pose problème ?

  3. #3
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Bonsoir Mathieu,
    Voici le Javascript de Scrollto :
    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
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    ;(function( $ ){
     
    	var $scrollTo = $.scrollTo = function( target, duration, settings ){
    		$(window).scrollTo( target, duration, settings );
    	};
     
    	$scrollTo.defaults = {
    		axis:'xy',
    		duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
    	};
     
    	// Returns the element that needs to be animated to scroll the window.
    	// Kept for backwards compatibility (specially for localScroll & serialScroll)
    	$scrollTo.window = function( scope ){
    		return $(window).scrollable();
    	};
     
    	// Hack, hack, hack... stay away!
    	// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
    	$.fn.scrollable = function(){
    		return this.map(function(){
    			var elem = this,
    				isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
     
    				if( !isWin )
    					return elem;
     
    			var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
     
    			return $.browser.safari || doc.compatMode == 'BackCompat' ?
    				doc.body : 
    				doc.documentElement;
    		});
    	};
     
    	$.fn.scrollTo = function( target, duration, settings ){
    		if( typeof duration == 'object' ){
    			settings = duration;
    			duration = 0;
    		}
    		if( typeof settings == 'function' )
    			settings = { onAfter:settings };
     
    		if( target == 'max' )
    			target = 9e9;
     
    		settings = $.extend( {}, $scrollTo.defaults, settings );
    		// Speed is still recognized for backwards compatibility
    		duration = duration || settings.speed || settings.duration;
    		// Make sure the settings are given right
    		settings.queue = settings.queue && settings.axis.length > 1;
     
    		if( settings.queue )
    			// Let's keep the overall duration
    			duration /= 2;
    		settings.offset = both( settings.offset );
    		settings.over = both( settings.over );
     
    		return this.scrollable().each(function(){
    			var elem = this,
    				$elem = $(elem),
    				targ = target, toff, attr = {},
    				win = $elem.is('html,body');
     
    			switch( typeof targ ){
    				// A number will pass the regex
    				case 'number':
    				case 'string':
    					if( /^([+-]=)?\d+(\.\d+)?(px)?$/.test(targ) ){
    						targ = both( targ );
    						// We are done
    						break;
    					}
    					// Relative selector, no break!
    					targ = $(targ,this);
    				case 'object':
    					// DOMElement / jQuery
    					if( targ.is || targ.style )
    						// Get the real position of the target 
    						toff = (targ = $(targ)).offset();
    			}
    			$.each( settings.axis.split(''), function( i, axis ){
    				var Pos	= axis == 'x' ? 'Left' : 'Top',
    					pos = Pos.toLowerCase(),
    					key = 'scroll' + Pos,
    					old = elem[key],
    					Dim = axis == 'x' ? 'Width' : 'Height';
     
    				if( toff ){// jQuery / DOMElement
    					attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
     
    					// If it's a dom element, reduce the margin
    					if( settings.margin ){
    						attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
    						attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
    					}
     
    					attr[key] += settings.offset[pos] || 0;
     
    					if( settings.over[pos] )
    						// Scroll to a fraction of its width/height
    						attr[key] += targ[Dim.toLowerCase()]() * settings.over[pos];
    				}else
    					attr[key] = targ[pos];
     
    				// Number or 'number'
    				if( /^\d+$/.test(attr[key]) )
    					// Check the limits
    					attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max(Dim) );
     
    				// Queueing axes
    				if( !i && settings.queue ){
    					// Don't waste time animating, if there's no need.
    					if( old != attr[key] )
    						// Intermediate animation
    						animate( settings.onAfterFirst );
    					// Don't animate this axis again in the next iteration.
    					delete attr[key];
    				}
    			});
     
    			animate( settings.onAfter );			
     
    			function animate( callback ){
    				$elem.animate( attr, duration, settings.easing, callback && function(){
    					callback.call(this, target, settings);
    				});
    			};
     
    			// Max scrolling position, works on quirks mode
    			// It only fails (not too badly) on IE, quirks mode.
    			function max( Dim ){
    				var scroll = 'scroll'+Dim;
     
    				if( !win )
    					return elem[scroll];
     
    				var size = 'client' + Dim,
    					html = elem.ownerDocument.documentElement,
    					body = elem.ownerDocument.body;
     
    				return Math.max( html[scroll], body[scroll] ) 
    					 - Math.min( html[size]  , body[size]   );
     
    			};
     
    		}).end();
    	};
     
    	function both( val ){
    		return typeof val == 'object' ? val : { top:val, left:val };
    	};
     
    })( jQuery );
    As-tu une idée ?
    Bonne soirée et merci,
    dh

  4. #4
    Membre expérimenté
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    716
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 716
    Points : 1 602
    Points
    1 602
    Par défaut
    jour

    essai ce script

    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
     
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
     
    <script>
    var scr_elem={
     
    	diff:0,
    	vitesse:0,
    	inter:'',
    	duree:0.5, 	//duree en seconde
    	vue:30,		//moment ou le scroll s'arrete
    	ddl:'',
    	vdv:'',
    	sens:'plus',
     
    	init:function(elem){
     
    		scr_elem.ddl=document.body.scrollTop ? document.body : document.documentElement;
    		clearInterval(this.inter);
     
    		var ht=document.getElementById(elem).getBoundingClientRect().top+this.ddl.scrollTop
     
    		this.diff=ht-this.ddl.scrollTop;
    		this.sens=(this.diff > 0 ? 'plus' : 'moins');
    		this.diff=Math.abs(this.diff)
    		this.vitesse=Math.round(this.diff/(50*this.duree));
    		this.inter=setInterval(scr_elem.lance_scroll,20);
    	},
     
    	lance_scroll:function(){
     
    	if(scr_elem.sens=='plus'){
     
    			if(scr_elem.diff-scr_elem.vitesse-scr_elem.vue<=0){
     
    				scr_elem.ddl.scrollTop+=(scr_elem.diff-scr_elem.vue);
    				clearInterval(scr_elem.inter);
    				return false;
    			}
    			scr_elem.ddl.scrollTop+=scr_elem.vitesse;
    			scr_elem.diff-=scr_elem.vitesse
    		}
     
    		else {
     
    			if(scr_elem.diff-scr_elem.vitesse+scr_elem.vue<=0){
     
    			scr_elem.ddl.scrollTop-=scr_elem.diff+scr_elem.vue;
    			clearInterval(scr_elem.inter);
     
    			return false;
    			}
    			scr_elem.ddl.scrollTop-=scr_elem.vitesse;
    			scr_elem.diff-=scr_elem.vitesse;
    		}
    	}
    }
     
    </script>
    </head>
    <body>
     
    <br><br><br>
    <button onclick='scr_elem.init("dvw")'>positionner</button>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id='dvv' style='height:100px;background:red;margin-top:120px;border-style:solid;border-width:30px'></div>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id='dvw' style='height:100px;background:blue;margin-top:120px;border-style:solid;border-width:30px'></div>
     
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <button onclick='scr_elem.init("dvv")'>positionner</button>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </body>
    </html>
    Plus vite encore plus vite toujours plus vite.

  5. #5
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Bonsoir melka one,
    Oui, c'est exactement ce que je cherche à faire : body
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id='dvv' style='height:100px;background:red;margin-top:120px;border-style:solid;border-width:30px'></div>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div><button onclick='scr_elem.init("dvv")'>positionner</button></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    Mais ce script ne fonctionne pas avec mon body (la div "dvv" étant dans mon cas "header" ou "video")
    Voici mon body :
    Code html : 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
    <audio autoplay>
    <source src="audio/song.ogg" type="audio/ogg">
    <source src="audio/song.mp3" type="audio/mp3">
    </audio>
     
    <div id="header">
       <div class="content">
        <ul class="bmenu">
          <li><a href="#section-un">About</a></li>
          <li><a href="#section-deux">Illustrations</a></li>
          <li><a href="#section-trois">Photography</a></li>
          <li><a href="#section-quatre">Web Design</a></li>
          <li><a href="#section-cinq">Personal Projects</a></li>
          <li><a href="#section-six">Contact</a></li>
        </ul></div>
     
    <div id="video"></div>
     
    <header class="headermobile mobile col-12">
      <button id="releaseMenu" ></button>
    <nav class="menu menumobile">
      <a href="#section-deux" class="menubutton">Blue</a>
      <a href="#section-trois" class="menubutton">Blue</a>
      <a href="#section-quatre" class="menubutton">Blue</a>
      <a href="#section-cinq" class="menubutton">Blue</a>
      <a href="#section-six" class="menubutton">Blue</a>
      </nav>
        </div><!-- #content -->
    </div><!-- #header -->
     
    <div id="container">
     
    <div id="section-un">
        <div class="menu" id="menu">
        <a href="#section-deux" class="menubutton">Green</a>
        <a href="#section-trois" class="menubutton">Blue</a>
        <a href="#section-quatre" class="menubutton">Blue</a>
        <a href="#section-cinq" class="menubutton">Blue</a>
        <a href="#section-six" class="menubutton">Blue</a>
    </div>
     
    <div id="section-deux"></div>
    <div id="section-trois"></div>
    <div id="section-quatre">
     
    <button onclick='scr_elem.init("video")'>positionner</button>
     
    </div><!-- #container -->
    As-tu une idée ? Merci pour ton aide et bonne soirée,
    dh

  6. #6
    Membre expérimenté
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    716
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 716
    Points : 1 602
    Points
    1 602
    Par défaut
    je sais pas si c'est volontaire mais dans le html que tu a mis beaucoup de div ne sont pas fermé et je me demande si la page est bien structuré ?
    Plus vite encore plus vite toujours plus vite.

  7. #7
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Merci pour ces remarques (bien utiles , J'avais pourtant tenté de faire une belle structure
    Voici le body bien structuré (???) :
    Code html : 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
    <audio autoplay>
    <source src="audio/song.ogg" type="audio/ogg">
    <source src="audio/song.mp3" type="audio/mp3">
    </audio>
     
    <div id="header">
       <div class="content">
        <ul class="bmenu">
          <li><a href="#section-un">About</a></li>
          <li><a href="#section-deux">Illustrations</a></li>
          <li><a href="#section-trois">Photography</a></li>
          <li><a href="#section-quatre">Web Design</a></li>
          <li><a href="#section-cinq">Personal Projects</a></li>
          <li><a href="#section-six">Contact</a></li>
        </ul></div><!-- #content -->
     
    <div id="video"></div>
     
    <header class="headermobile mobile col-12">
      <button id="releaseMenu" ></button>
    <nav class="menu menumobile">
      <a href="#section-deux" class="menubutton">Blue</a>
      <a href="#section-trois" class="menubutton">Blue</a>
      <a href="#section-quatre" class="menubutton">Blue</a>
      <a href="#section-cinq" class="menubutton">Blue</a>
      <a href="#section-six" class="menubutton">Blue</a>
      </nav></div><!-- #header -->
     
    <div id="container">
     
    <div id="section-un">
        <div class="menu" id="menu">
        <a href="#section-deux" class="menubutton">Green</a>
        <a href="#section-trois" class="menubutton">Blue</a>
        <a href="#section-quatre" class="menubutton">Blue</a>
        <a href="#section-cinq" class="menubutton">Blue</a>
        <a href="#section-six" class="menubutton">Blue</a>
    </div><!-- #menu -->
     
    <div id="section-deux"></div>
    <div id="section-trois"></div>
    <div id="section-quatre">
     
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div><button onclick='scr_elem.init("content")'>positionner</button></div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div><!-- #section-quatre -->
    </div><!-- #section-un --></div><!-- #container -->

    Mais toujours pas de Scrollto (#) sur le bouton positionner pour aller sur le "header", "video" ou "content"
    Merci pour ton aide,
    dh

  8. #8
    Membre expérimenté
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    716
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 716
    Points : 1 602
    Points
    1 602
    Par défaut
    le script fonctionne avec des id alors que tu appel une class il y a deux solutions soit tu met un id a ll'element soit tu ne veut pas mettre d'id et tu utilise querySelector mais la sa ne fonctionnera pas avec ie 8
    Plus vite encore plus vite toujours plus vite.

  9. #9
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Bonsoir melka one,
    Encore merci pour ton aide, mais le script ne fonctionne pas non plus avec :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    scr_elem.init("header")
    ou Par contre, ça fonctionne si je mets "section-un" comme cible (mais je me retrouve avec une marge d'environ 35 px en haut ??? Incompréhensible J'ai beau avoir cherché dans les CSS), et ce n'est pas le but recherché; ce dernier étant de revenir à la vidéo.
    Si ce n'est pas possible, peut-être faut t'il que je songe à rafraichir la page avec un "preload" (page de chargement) pour ne pas revenir brutalement sur le "header" ?
    Dans ce cas, cela ferait parti d'une prochaine discussion...
    Merci pour ton aide et bonne soirée,
    dh

  10. #10
    Membre expérimenté
    Homme Profil pro
    bricoleur par les mots
    Inscrit en
    Avril 2015
    Messages
    716
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 79
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : bricoleur par les mots
    Secteur : Distribution

    Informations forums :
    Inscription : Avril 2015
    Messages : 716
    Points : 1 602
    Points
    1 602
    Par défaut
    j'avoue ne pas comprendre j'ai teste en inserant le code et sa fonctionne

    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
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
     
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
     
    <script>
    var scr_elem={
     
    	diff:0,
    	vitesse:0,
    	inter:'',
    	duree:0.5, 	//duree en seconde
    	vue:30,		//moment ou le scroll s'arrete
    	ddl:'',
    	vdv:'',
    	sens:'',
     
    	init:function(elem){
     
    		scr_elem.ddl=document.body.scrollTop ? document.body : document.documentElement;
    		clearInterval(this.inter);
     
    		var ht=document.getElementById(elem).getBoundingClientRect().top+this.ddl.scrollTop
     
    		this.diff=ht-this.ddl.scrollTop;
    		this.sens=(this.diff > 0 ? 'plus' : 'moins');
    		this.diff=Math.abs(this.diff)
    		this.vitesse=Math.round(this.diff/(50*this.duree));
    		this.inter=setInterval(scr_elem.lance_scroll,20);
    	},
     
    	lance_scroll:function(){
     
    	if(scr_elem.sens=='plus'){
     
    			if(scr_elem.diff-scr_elem.vitesse-scr_elem.vue<=0){
     
    				scr_elem.ddl.scrollTop+=(scr_elem.diff-scr_elem.vue);
    				clearInterval(scr_elem.inter);
    				return false;
    			}
    			scr_elem.ddl.scrollTop+=scr_elem.vitesse;
    			scr_elem.diff-=scr_elem.vitesse
    		}
     
    		else {
     
    			if(scr_elem.diff-scr_elem.vitesse+scr_elem.vue<=0){
     
    			scr_elem.ddl.scrollTop-=scr_elem.diff+scr_elem.vue;
    			clearInterval(scr_elem.inter);
     
    			return false;
    			}
    			scr_elem.ddl.scrollTop-=scr_elem.vitesse;
    			scr_elem.diff-=scr_elem.vitesse;
    		}
    	}
    }
     
    </script>
    </head>
    <body>
     
    <br><br><br>
     
    <div><button onclick='scr_elem.init("video")'>video</button></div>
    <div><button onclick='scr_elem.init("container")'>container</button></div>
    <div><button onclick='scr_elem.init("header")'>header</button></div>
    <br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <audio autoplay>
    <source src="audio/song.ogg" type="audio/ogg">
    <source src="audio/song.mp3" type="audio/mp3">
    </audio>
     
    <div id="header">
       <div class="content">
        <ul class="bmenu">
          <li><a href="#section-un">About</a></li>
          <li><a href="#section-deux">Illustrations</a></li>
          <li><a href="#section-trois">Photography</a></li>
          <li><a href="#section-quatre">Web Design</a></li>
          <li><a href="#section-cinq">Personal Projects</a></li>
          <li><a href="#section-six">Contact</a></li>
        </ul></div><!-- #content -->
     
    <div id="video"></div>
     
    <header class="headermobile mobile col-12">
      <button id="releaseMenu" ></button>
    <nav class="menu menumobile">
      <a href="#section-deux" class="menubutton">Blue</a>
      <a href="#section-trois" class="menubutton">Blue</a>
      <a href="#section-quatre" class="menubutton">Blue</a>
      <a href="#section-cinq" class="menubutton">Blue</a>
      <a href="#section-six" class="menubutton">Blue</a>
      </nav></div><!-- #header -->
     
    <div id="container">
     
    <div id="section-un">
        <div class="menu" id="menu">
        <a href="#section-deux" class="menubutton">Green</a>
        <a href="#section-trois" class="menubutton">Blue</a>
        <a href="#section-quatre" class="menubutton">Blue</a>
        <a href="#section-cinq" class="menubutton">Blue</a>
        <a href="#section-six" class="menubutton">Blue</a>
    </div><!-- #menu -->
     
    <div id="section-deux"></div>
    <div id="section-trois"></div>
    <div id="section-quatre">
     
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
     
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div><!-- #section-quatre -->
    </div><!-- #section-un --></div><!-- #container -->
     
    </body>
    </html>
    pour la position a 35 px il y a une variable en debut de script que l'on modifie afin de spécifier a quelle moment le scroll s'arrete

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    vue:30,		//moment ou le scroll s'arrete
    Plus vite encore plus vite toujours plus vite.

  11. #11
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Désolé pour le JQ, c'était pourtant bien marqué C'était bien ça
    J'attaque un gab pour mon site, donc s'est un peu le bazar actuellement, pas forcément beau niveau code comme niveau<div> (tout est fictif et rien est calé, code pas bien rangé...).
    Mais le "travail" est en ligne (j'ai viré le son et la vidéo) : http://http://alasdairlawrencewilliams.org/ Si cela peut te donner une piste sur mon erreur
    Encore merci melka one,
    dh

  12. #12
    Membre habitué
    Homme Profil pro
    Webdesigner
    Inscrit en
    Août 2014
    Messages
    445
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Hauts de Seine (Île de France)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2014
    Messages : 445
    Points : 138
    Points
    138
    Par défaut
    Bonjour à tous,
    N'arrivant pas à résoudre ce problème, j'ai opté pour une page de transition (spinner) au click.
    C'est loin d'être ce que je souhaitais mais il faut parfois s'avérer battu par les JQuery
    Je laisse l' "exercice" encore qq jours en ligne au cas :
    http://www.alasdairlawrencewilliams.org/
    Merci à mathieu et melka one et bon week-end,
    dh

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 8
    Dernier message: 11/11/2008, 17h33
  2. NameSpaces non valide sur Office Open
    Par Heureux-oli dans le forum XML/XSL et SOAP
    Réponses: 8
    Dernier message: 07/01/2008, 10h55
  3. "Argument non valide" sur requête
    Par KEROZEN dans le forum Access
    Réponses: 4
    Dernier message: 15/08/2007, 20h35
  4. Erreur, argument non valide sur IE
    Par Babssss dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 30/03/2007, 07h08
  5. [JDBC] Opération non valide sur un ensemble
    Par marti dans le forum JDBC
    Réponses: 2
    Dernier message: 13/10/2005, 19h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo