[HTML5]Un lien ancre qui ne fonctionne pas...
A l'aide
-
A l'aide -
A l'aide -
Bonjour,
Je suis étudiant en graphisme et média web.
Je construis actuellement un site pour une association et j'ai un léger soucis d'ancrage.
Contexte :
Un élément permet sur chaque page du site de retourner à l'index du site (une petite maisonnette). J'ai une page "conf_jour.html" pour les conférences et journées qui est très longue, j'y ai mis un système pour remonter la page en scroll doux.
Problème :
Quand je clique sur la maisonnette cela me renvois à la div "bandeau" qui est tout en haut de la page (en fait la maison rempli la même fonction que ma flèche "gotop" alors qu'en html elle est bien paramétrée).
Le "sharer" est la div contenant "home" et la futures probable icone twitter.
<div id="sharer">
<div id="home"><a href="index.html#bandeau"><img src="icon/home.png" height="42" width="42"></a></div>
</div>
<div id="gotop">
<a href="#bandeau"></a>
<span>Retourner à la liste des conférences</span>
</div>).
Demande :
Quelqu'un aurait-il une solution pour faire une flèche de retour en haut de ma page et en laissant mon icone home pour retourner à l'index de mon site internet ?
Je suis étudiant en graphisme et média web.
Je construis actuellement un site pour une association et j'ai un léger soucis d'ancrage.
Contexte :
Un élément permet sur chaque page du site de retourner à l'index du site (une petite maisonnette). J'ai une page "conf_jour.html" pour les conférences et journées qui est très longue, j'y ai mis un système pour remonter la page en scroll doux.
Problème :
Quand je clique sur la maisonnette cela me renvois à la div "bandeau" qui est tout en haut de la page (en fait la maison rempli la même fonction que ma flèche "gotop" alors qu'en html elle est bien paramétrée).
Le "sharer" est la div contenant "home" et la futures probable icone twitter.
<div id="sharer">
<div id="home"><a href="index.html#bandeau"><img src="icon/home.png" height="42" width="42"></a></div>
</div>
<div id="gotop">
<a href="#bandeau"></a>
<span>Retourner à la liste des conférences</span>
</div>).
Demande :
Quelqu'un aurait-il une solution pour faire une flèche de retour en haut de ma page et en laissant mon icone home pour retourner à l'index de mon site internet ?
A voir également:
- [HTML5]Un lien ancre qui ne fonctionne pas...
- Créer un lien pour partager des photos - Guide
- Lien url - Guide
- Verificateur de lien - Guide
- Lien copié - Forum Mobile
- Lien mega ✓ - Forum Webmastering
11 réponses
Pour déclarer une ancre on fait comme ceci :
Peut importe la balise le principe reste le même :
Et on s'y rend comme ceci :
Ou :
<h2 id="nom_ancre">Titre</h2>
Peut importe la balise le principe reste le même :
<div id="nom_ancre"></div>
Et on s'y rend comme ceci :
<a href="#nom_ancre">Go To..</a>
Ou :
<a href="page.html#nom_ancre">Go To..</a>
Je sais bien et c'est pour ça que ça me pose un problème : j'ai bien mis la bonne sémantique avec <a href="index.html#bandeau"> qui l'équivalent de ton <a href="page.html#nom_ancre">Go To..</a>. La seule différence entre les deux c'est que je ne met pas de mots, j'ai une image de flèche comme sur commentçamarche.net. De plus même ma flèche est paramétrée avec <a href="#bandeau"></a> (équivalent à ton <a href="#nom_ancre">Go To..</a>).
page.html#nom_ancre doit correspondre obligatoirement à un ID !
Exemple :
Dans votre cas, ceci devrait vous convenir :
Exemple :
<div id="nom_ancre"></div>
Dans votre cas, ceci devrait vous convenir :
<div id="sharer"> <div id="home"> <a href="index.html#gotop"> <img src="icon/home.png" height="42" width="42"> </a> </div> </div> <div id="gotop"> <span>Retourner à la liste des conférences</span> </div>
http://ge.tt/9C9P6WN/v/0?c (lien vers un screenshot).
Tout d'abords, je te remercie de m'aider 0x40 !
Je me suis permis d'illustrer mon soucis afin que l'on puisse mieux étudier le cas ^^.
Comme tu peux le constater j'ai suivis tes recommandations mais ma maison continue à se comporter comme la flèche de retour.
J'ai pourtant (je pense) bien suivis la sémantique :
(Pour l'étiquette), et :
Si tu veux aller voir en direct : http://www.pole9ouest-epfcl.fr/conf_jour.html
Tout d'abords, je te remercie de m'aider 0x40 !
Je me suis permis d'illustrer mon soucis afin que l'on puisse mieux étudier le cas ^^.
Comme tu peux le constater j'ai suivis tes recommandations mais ma maison continue à se comporter comme la flèche de retour.
J'ai pourtant (je pense) bien suivis la sémantique :
<div id="bandeau"></div>
(Pour l'étiquette), et :
<div id="home"> <a href="index.html#bandeau"></a></div>
Si tu veux aller voir en direct : http://www.pole9ouest-epfcl.fr/conf_jour.html
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Du coup je pense mieux comprendre ton problème :)
Je ne vois pas du tout comment on pourrait faire oO La petite maison >< ne prend pas du tout en compte ce qui est passé en paramètre via le href !!
Je ne vois pas du tout comment on pourrait faire oO La petite maison >< ne prend pas du tout en compte ce qui est passé en paramètre via le href !!
C'est ça que je ne comprends pas.
D'autant plus que je développe en local (c'est à dire que j'ai un dossier sur mon bureau et je code comme un zombie dessus). Quand je lance la page en local ça fonctionne bien, mais dès que je l'upload avec mon FTP, ça ne fonctionne pas :(
D'autant plus que je développe en local (c'est à dire que j'ai un dossier sur mon bureau et je code comme un zombie dessus). Quand je lance la page en local ça fonctionne bien, mais dès que je l'upload avec mon FTP, ça ne fonctionne pas :(
Par contre ici -> http://www.pole9ouest-epfcl.fr/delegues.html
Elle fonctionne très bien la redirection oO
Elle fonctionne très bien la redirection oO
Je viens de le tester j'y pensais à l'instant.
J'ai mis le lien absolu en direction de l'index au #logo, ça ne marche pas.
Cependant je suis en train de penser à quelque chose : ma flèche utilise un script en Javascript pour que mon scroll soit doux. Peut être que le script est trop "ouvert" et comporte un écouteur d'évènement trop large, englobant à la fois mon "home" (je ne sais pas si je suis très clair) : Comme si le script s'applique aussi à mon "home" en gros.
En voici le détail du script :
(Personellement je ne comprends pas très bien le Java...)
J'ai mis le lien absolu en direction de l'index au #logo, ça ne marche pas.
Cependant je suis en train de penser à quelque chose : ma flèche utilise un script en Javascript pour que mon scroll soit doux. Peut être que le script est trop "ouvert" et comporte un écouteur d'évènement trop large, englobant à la fois mon "home" (je ne sais pas si je suis très clair) : Comme si le script s'applique aussi à mon "home" en gros.
En voici le détail du script :
(Personellement je ne comprends pas très bien le Java...)
$(document).ready(function() {
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
var locationPath = filterPath(location.pathname);
var scrollElem = scrollableElement('html', 'body');
$('a[href*=#]').each(function() {
var thisPath = filterPath(this.pathname) || locationPath;
if ( locationPath == thisPath
&& (location.hostname == this.hostname || !this.hostname)
&& this.hash.replace(/#/,'') ) {
var $target = $(this.hash), target = this.hash;
if (target) {
var targetOffset = $target.offset().top;
$(this).click(function(event) {
event.preventDefault();
$(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
location.hash = target;
});
});
}
}
});
// use the first element that is "scrollable"
function scrollableElement(els) {
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
});
