Discussion :

[maryjane75]

Hello,

J'ai 2 scripts qui fonctionnent séparément sans problème mais je voudrais combiner ces 2 scripts parceque séparément je n'arrive pas à l'effet voulu

le premier, trouve bien la position du div repère qui est hook dans la page et se place à 120px du haut pour le header fix qui est de 120px, le problème sur mobile le header fixe est de 70px donc j'ai un décalage

premier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var topOfElement = document.querySelector('#hook').offsetTop - 120;
window.scroll({ top: topOfElement, behavior: "smooth" });

Second :
Le second à un autre problème parceque il utilise pas le repère hook ce qui rend le responsive mobile pas précis

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(function(){
    if (window.innerWidth < 880) {
       setTimeout(function(){
        window.scrollTo(0,170)
    },2000);
    } else {
       setTimeout(function(){
        window.scrollTo(0,490)
    },2000);
    }

Je voudrais si il possible de combiner les 2, ou bien dans le second de lui dire que c'est à partir de hook qu'il faut mettre la position.

Voilà si quelqu'un peut me venir en aide ça serait cool ;-)

Marie

[maryjane75]

Résolu en pure script sans css

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
var DELAY_READING = 4000; // 4 seconds = 4000; 10 seconds = 10000
var DELAY_SCROLLING = 1500;
 
var links = [ '#hook' ];
var timerId = 0;
 
delayLinks(0);
 
 
function delayLinks( i ) {
  if( i >= links.length ) i = 0;
  scrollToLink( links[i] );
 
}
 function scrollToLink( link ){
    if (window.innerWidth < 880) {
        selectLink = $( link );

[Dave Hiock]

\ô/

Résolu en pure script sans css

pas tout compris mais déjà mélanger javascript vanilla et jquery reste une mauvaise façon de procéder.

[maryjane75]

Hello c'est du Keerynilla je sais pas si c'est une mauvaise façon de procéder, mais mélanger des choses ça peut être sympa tu as essayé la glace à la vanille avec un râpé de bacons pas Kévin, le mélange est surprenant et ça marche bien.
Merci pour ton aide.

J'ai réduit le code le principal c'est que ça marche sur du PHP

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var DELAY_READING = 4000; // 4 seconds = 4000; 10 seconds = 10000
 
var links = [ '#hook' ];
 
delayLinks(0);
 
 
function delayLinks( i ) {
  if( i >= links.length ) i = 0;
  scrollToLink( links[i] );
 
}
 function scrollToLink( link ){
    if (window.innerWidth < 880)

Marie

[maryjane75]

Ajout d'un délais pour l'exécution et maintenant le résultat est parfait sur mobile et bureau, si ça peut quelqu'un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
setTimeout( function() {var links = [ '#hook' ];
 
delayLinks(0);
 
 
function delayLinks( i ) {
  if( i >= links.length ) i = 0;
  scrollToLink( links[i] );
 
}
 function scrollToLink( link ){
    if (window.innerWidth < 880) {
	$('html, body').animate({

[NoSmoking]

Bonjour,
il est sensé faire quoi ton script incomplet ?
À quoi te sert le rajout d'un setTimeout ?

[maryjane75]

Il permet de placer le scrollbar automatiquement à un endroit précis comme une div, lors du chargement de la page avec un header fixed qui change de taille sur responsive, l'ajout du setTimeout permet au layerslider (qui est assez grand) de s'afficher avant que le scroll descend automatiquement sur le formulaire contact. Le tout a été adapté pour un module joomla 5

[NoSmoking]

Il permet de placer le scrollbar automatiquement à un endroit précis comme une div, lors du chargement de la page ...

il existe des méthodes bien plus adaptées et faites pour cela !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.addEventListener("DOMContentLoaded", () => {
  // le code à exécuter
});

son pendant en jQuey :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function() {
  // le code à exécuter
});

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(function() {
  // le code à exécuter
});

pour le scroll vers un élément :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

elem.scrollIntoView();

ou via l'attribut autofocus, peut être déroutant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input name="saisie" value="valeur saisie" autofocus>

Ressources :

• Document: DOMContentLoaded event
• jQuery ready
• element.scrollIntoView
• L'attribut autofocus