Positionnement page d'accueil sur un élément précis

Alexandre Pradal
Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Je suis en train de creer mon premier site, il s'agit d'un projet de fin de formation.
Actuelement je m'occupe d'agencer tout les éléments sur la page d'accueil.
Cette derniere contient une balise vidéo et je souhaiterais que la page se positionne automatiquement dessus sans que l'utilisateur n'ait à scroller (le lecteur vidéo serait ainsi au centre de la fenetre).
J'imagine qu'un systeme d'ancre avec du Jquery permettrait de creer cette animation, mais pour le moment je n'y arrive pas par moi meme !
Des idées ??
Merci !

Voici mon code : 

Entoure<body>
    <header>
        <nav>
            <div class="logo">
                <h3>TDS</h3>
            </div>
            <ul class="nav-links">
                <li class=""><a href="">Acceuil</a></li>
                <li class=""><a href="">L'équipe</a></li>
                <li class=""><a href="">Activité</a></li>
                <li class=""><a href="">Catalogue sonore</a></li>
                <li class=""><a href="">Infos</a></li>
            </ul>
            <div class="burger">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>
        </nav>
    </header>

    <div id="nuagedenotes" class="note"></div>
    <div id="note1" class="note"></div>
    <div id="note2" class="note"></div>

    <section class="container">
        <article class="article-homepage" id="h1-homepage">
            <h1>TERRE DE SONS</h1>
            <h3>Sound design, compositions originales, mix et mastering</h3>
        </article>
        <article class="article-homepage" id="video-TDS">
            <video src="video/teaser-tds.mp4" controls>ce fichier ne peut pas etre lu</video>
        </article>
        <article class="article-homepage" id="form-homepage">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos officia in ratione iusto ducimus, neque
                nihil quasi provident architecto deleniti pariatur, alias omnis id maiores ipsa minus necessitatibus
                natus. Aspernatur sit error hic deserunt saepe illum modi itaque perspiciatis laborum soluta, quos totam
           .</p>
        </article>
    </section>

    <a href="#" id="scroll-to-the-top"><i class="fa fa-chevron-circle-up" id="scroll" aria-hidden="true"></i>
    </a>

    <footer>
        <ul>
            <li><a href="">CGU</a></li>
            <li><a href=""> Contacts</a></li>
        </ul>
        <div id="reseaux-sociaux">
            <a href="#" id="logo-facebook"><i class="fa fa-facebook" aria-hidden="true" id="facebook"> </i></a>
            <a href="#" id="logo-insta"><i class="fa fa-instagram" aria-hidden="true" id="instagram"></i></a>
        </div>
    </footer>

    <script src="app.js"></script>
</body>z votre code pour bien le mettre en forme

2 réponses

Soundboy39

Bonjour,

Solution en natif après avoir récupéré la position de ton élement : https://www.w3schools.com/jsref/met_win_scrollto.asp

Une autre solution plus simple mais avec un plugin jQuery : https://github.com/flesler/jquery.scrollTo

Alainpre

Voila une solution JS. La fonction centrer() est à appeler sur <body onload="centrer()">

    function centrer() {
        var obj=document.getElementById("video-TDS");
        window.scrollTo(0, obj.offsetTop-100);
    }

Remarque : si la palge n'est pas plus haute que ça dans le vrai site, i lsera peut-être nécessaire de donner une hauteur ficture par exemple au footer pour que le scrodll se fasse bien.