Scroll automatique sur une page

Bonsoir

Voici mon problème

Sur un site (wordpress, fait maison, actuellement en développement) j’ai un header assez imposant en termes de hauteur, obligeant le visiteur à scroller pour afficher le contenu de la page, je voudrais donc, que de façon automatique, quand la page se charge, au lieu d’arriver en haut de page on arrive directement au contenu (. div) (descente automatique)

J’ai bien tenté de faire une ancre, via l’URL, en y ajoutant la DIV de destination (avec une URL du type : https://exemple.com/ma-page/#ancre1) cette méthode marche très bien en soit, mais uniquement sur une navigation interne (au clic sur un menu par exemple)

Je cherche à faire la même chose, mais sans modifier l’URL, ainsi le scroll fonctionnera avec toutes les URL du site

Par ailleurs, je veux un effet smooth pour animer cette descente automatique

Je sais qu’il existe des solutions de scripts avec la commande «?scrollTo?», mais cette commande semble associée à une instruction de type «?OnClick?» comme pour un lien de retour vers le haut sur certains sites

Or, je veux que ce défilement automatique se fasse sans clic, dès le chargement de la page

Bref, je sollicite donc votre aide, car je suis en panne de solution

Merci

Cordialement,
Modifié par olivier51 (02 Feb 2020 - 21:42)

Salut

function scrollTo( target ) {
        if( target.length ) {
            $("html, body").stop().animate( { scrollTop: target.offset().top }, 1500);
        }
    }

En Jquery, il suffit de lancer cette méthode scrollTo au bon moment (ou à chaque fois),
il reçoit en param ton item vers lequel tu veux scroller.
Modifié par JENCAL (03 Feb 2020 - 12:56)

Merci de cette réponse

en fait j'ai entre temps trouver ce code :

 document.addEventListener("DOMContentLoaded", () => {
    let offset = document.getElementById("ancre1").offsetTop;
     
    window.scrollTo({
      top: offset,
      behavior: 'smooth'
    }); 

que je peux mettre directement dans le header de mon site en l'encadrant des balise <script> et </script>

ce code fait bien son travail il permet de "glisser" automatiquement vers la div #ancre1 au chargement de la page c'est parfait

seuls problèmes avec ce script je ne peux pas réglé la vitesse de l'effet smooth et le navigateur Safari est incompatible avec la directive behavior: 'smooth'

suite à votre réponse j'ai essayer avec votre script mais ça ne semble pas fonctionner j'ai pourtant appeler ma DIV mais rien ne se passe je n'arrive pas à comprendre pourquoi

donc mon interrogation est la suivante: est il possible d'adapter, entre guillemets, le code que j'ai trouvé pour régler la vitesse du scroll et rendre l'effet smooth compatible avec safari où peut être y'a t'il une autre solution... Bref je suis en panne d'explication et je sollicite votre aide

merci
Modifié par olivier51 (03 Feb 2020 - 16:43)

curieux, pourtant tu lui fais précise smooth

pour moi ça fonctionne :

https://codepen.io/JUSEN/pen/BayXvpv

ton problème vient d'ailleurs.
Modifié par JENCAL (03 Feb 2020 - 16:46)