scrolltop pour positionner le scrollbar à l'endroit d'une div

Version imprimable

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 :oops:

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 :weird:

premier :
Code:

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 :calim2:
Code:

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

Résolu en pure script sans css :lol:

Code:

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 );

24/05/2024, 21h15
Dave Hiock

\ô/

Citation:

Résolu en pure script sans css :lol:

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

Hello c'est du Keerynilla :ptdr: 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 :ptdr: 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:

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

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 :ptdr:

Code:

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({

26/05/2024, 18h46
NoSmoking

Bonjour,
il est sensé faire quoi ton script incomplet ?
À quoi te sert le rajout d'un setTimeout ?
26/05/2024, 19h33
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
27/05/2024, 10h37
NoSmoking
Citation:

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:

1 2 3 document.addEventListener("DOMContentLoaded", () => { // le code à exécuter });
son pendant en jQuey :
Code:

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

1 2 3 $(function() { // le code à exécuter });
pour le scroll vers un élément :

Code:

elem.scrollIntoView();

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

Code:

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

Ressources :