Bonjour à tous,

après plus de de 6 ans sans touché a une ligne de code ( j'ai l'impression d'être au alcoolique anonyme avec cette phrase :-) ), je me replonge dans se milieux du codage.

Je suis actuellement en train de faire un site en one page ( plus ou moins ) qui me servira de petite galerie photo mais je bloque sur certain point.

( le site en cours de réalisation : http://www.guillaumegomes.fr )

Je souhaiterais styliser mes liens d'ancrage pour ne plus avoir de index.php#galerie, Index.php#me-contacter.. mais plutôt avoir des liens du style monsite.fr/me-contacter tous en gardant la navigation en scroll.

Le site ne sera pas entièrement un one page car le liens qui seront au niveaux de ma galerie corresponderont a des catégories, et lorsqu'on cliquera dessus on quittera la page pour afficher les photos lier à la catégorie.

En tous cas ça fait plaisir de refaire quelques lignes de codes :-)

D'avance merci pour votre aide :-)

8 réponses


Sauf erreur de ma part, cela n'est pas possible. Tu peux éventuellement utiliser ceci : https://www.w3schools.com/jsref/met_element_scrollintoview.asp, mais tu n'auras plus aucune information dans l'URL. C'est peut-être encore la meilleure solution.

Bonjour Guillaume,

Même réponse que Ofilot, pour moi ce n'est pas possible, puisque 1 URL = 1 Page, donc si l'URL change, on change de page (hormis si on utilise un #, spécificité utilisée pour naviguer à l'intérieur du document courant).

Au passage, si ta finalité est purement "cosmétique", je ne vois pas l'intéret... est-ce que tu pense que les utilisateurs vont se rendre compte que le texte présent dans la barre d'adresse a changé suite à leur clique ? et si oui, est-ce qu'ils vont y porter attention ? après ce n'est que mon avis...

Alors je n'ai pas testé mais en cherchant, en 1 minute j'ai trouvé ça :

https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-url-with-javascript-without-page-r

Apparemment c'est possible .. non ?

@Arzou,

J'avais vu aussi ce code, et sauf erreur de ma part, le résultat obtenu par ce code n'est pas celui recherché par @guillaumegomes.

En effet, de ce que je comprends, il permet juste de supprimer complètement le hash dans l'URL (ex : #me-contacter, etc.), tout en laissant une trace dans l'historique du navigateur. Ainsi si le visiteur arrive sur le site et qu'il clique sur un lien le menant vers une section (ex: #me-contacter), et qu'il clique ensuite sur le bouton Précédent... il sera redirigé à un autre niveau (positionnement du scroll), tout en restera sur la même page. Ici dans notre exemple, ça serait en haut du site.

Comme indiqué sur Stackoverflow, cette astuce ne semble pas fonctionner sur tous les navigateurs.

À noter qu'il y a une chose qui m'échappe dans le code montré... à aucun moment on ne passe à la méthode "history.pushState" le positonnement du scroll. J'ai l'impression que cela est fait automatiquement (à confirmer).

Effectivement, je viens de tester, ça enlève tout ce qu'il y a après le # ..
Désolé pour la fausse info du coup :D

Merci @ofilot pour ta précision

Mmmh

Alors tu as deux solutions, dans les deux cas il y'aura du js à faire

La première, c'est que ton problème c'est uniquement la présence du hash dans l'url qui te gène, et c'est possible de tout enlever, au lieux de passer par l'ancrage, utilises un event JS pour scroller jusqu'a la bonne position ;)

La deuxieme, c'est que tu veux vraiment les sections dans la barre d'adresse, alors dans ce cas la faudra faire un peu de bricolage...

Tout d'abord tu es en PHP, donc impossible en l'état de faire ce qu'il faut, tu devras installer Turbolinks pour empecher le refresh de la page
Ensuite tu devra t'inspirer des routes model binding
En gros quand tu cliqueras dans un lien, tu devras parser l'url et récupérer la dernière partie comme me-contacter
Tu renvoies ensuite la même vue en faisant passer la fin de l'url à un event JS, et ensuite ton JS n'aura plus qu'a faire un scroll vers la div qui a comme id la fin de ton URL

Ca donnerait ça

    Click
    |
     -> Router 
            get (http://monsite.com/me-contacter)
     |      
      -> Controller
            extractSection(string url) => 'me-contacter'
            return la page avec ['section' => 'me-contacter']
     |
       -> Vue
            JS
            |
              -> let oldSection = 'http://monsite.com/gallerie'
              -> if (section !== oldSection)
                    |
                      -> tu scrolles
                    |
                      -> oldSection = section                                                                                   

Niveau JS ton oldSection ne devrait pas être effacé grace à TurboLinks

(Bon, c'est pas simple de faire un shéma avec seuleemnt du texte faudra faire avec ^^')

Y'a moyen de faire ça proprement

Un moyen plus simple aurait été de passer par un frameworkJS, comme Next si tu préfères React ou Nuxt si tu préfères Vue

Bonjour, Ça fait longtemps que j'ai pas codé et j'éprouve des sentiments de nostalgie et de confusion à la fois j'ai oublié beaucoup d'astuces et je suis entrain de recupérer, il faut jamais s'arrêter je pense. Bon la seule solution que j'ai trouvé pour le moment c'est de commençer petit a petit à l'aide d'un outil de création de site Internet et pour le moment je suis tombé sur https://construit-pour-durer.com/ et honnetement ça m'a faciliter beaucoup de trucs et je pense ça va vous servir mon pote. Est ce que vous codez pour vous même ou c'est pour du freelance? Je veux savoir si ça vaut le coup de créer des sites en tant qu'un freelancer ça va servir pour m'aider puisque je suis un étudiant et je suis vraiment interessé par la création des sites web

Bonjour normalement c'est possible, et d'ailleurs j'ai déjà eu des problèmes en le faisant.
Notamment avec Reactjs + React Router DOM si tu utilise le BrowserRouter à la place du HashRouter, tu n'auras pas de # dans l'URL tu auras directement des URL's avec la forme
/me-contacter à la place de /#me-contacter, on peut trouvé cela plus esthétique mais il faut gardé en tête qu'il y à un comportement différent quand tu fait cela qui ce passe,
lorsque l'utilisateur va navigué par exemple à /me-contacter si il décide pour une raison où une autre de rechargé la page manuellement le navigateur va envoyé la requête à ton serveur pour récupéré le contenue mais il l'enverra à /me-contacter donc si ton serveur et configuré pour renvoyé uniquement une réponse pour / et délégué les routes à Javacript (ce qui peut être logique dans une application single page) et bien ton client reçoit une vilaine erreur 404 Not Found car la route n'existe pas sur ton serveur, alors que si l'URL et construite sous la forme /#me-contacter et que l'utilisateur recharge la page cette fois le navigateur c'est qu'il ne doit pas envoyé les ancres au serveur donc il envoi la requête à / et pas à /#me-contacter et le serveur renvoit le contenue HTML de la page d'acceuil en plus le navigateur se souvient de l'ancre à ajouté ce qui permet à ton router Javascript de chargé directement le bon contenue.