Ancres, scolling : rendre la navigation fluide Résolu/Fermé

Question

Bonjour, 

Aujourd'hui je m'attaques à la partie intéressante (et qui m'est totalement inconnue) d'un projet : rendre la navigation d'un site "one page" fluide, basée sur des ancres et des transitions progressives. Le hic : je ne code quasi pas (j'suis en 1ere année de DUT Metiers du Multimédia et de l'Internet), mais je comprends les codes, j'suis généralement apte à les modifier. 
Mon idée est de faire une site sur 1 page, avec une side bar à gauche qui présenterai un menu. Via ce menu, on pourrait naviguer dans les différentes catégories du site, et la partie principale (full page - left side bar) déroulerai fluidement. J'me doute que pour ceci, il faut appliquer du javascript, sauf si css3 et/ou html5 ont fait des progrès...

Pourquoi j'ouvre ce poste ? Pour vous demander votre aide, si vous avez des conseils et des idées à me donner. J'vous cache pas que si quelqu'un à un tuto complet et compréhensible je suis trèèèès intéressé ! J'suis totalement perdu mais j'ai pas envie de baisser les bras :)


Bien bonne journée à vous
Roxanne

ThEBiShOp · Answer

Salut,

tu trouveras probablement ce que tu veux là :
https://www.creativejuiz.fr/blog/tutoriels/jquery-effet-smooth-scroll-defilement-fluide

Roxy · Answer

C'est exactement ce que je cherchais ! (le site est très intéressant, tu fais mon bonheur !)
Grand merci

Roxy · Answer

J'ai appliqué ce que le mec présente, mais la transition ne s'applique pas. Quelqu'un pourrait-il m'aider ? (j'suis chiante hein) Ma manip : J'ai créé un fichier "scroll.js", je l'ai placé dans mon répertoir "js". Dans ma page .html, j'ai (bêtement) collé une ligne qu'il indique : Pour finir, j'ai fait un appel à mon script via : Mes ancre fonctionnent, mais la transition est brut

Roxy · Answer

Bon j'me parle à moi même, mais j'y suis arrivé!  Les transitions sont toutes belles ! 
Maintenant surgit un problème lié au css : j'ai une sidebar (menu), et afin de rendre le site un tant soit peu égonomique je souhaiterai la rendre fixe. Pour cela j'ai essayé "position: absolute" et "background-attachment:fixed;", mais rien n'y fait ...