11487 sujets

JavaScript, DOM et API Web HTML5

Chargement de la page directement sur une ancre

Bonjour,

Je suis en train de développer un site sur une page avec défilement doux entre mes sections. Le tout fonctionne avec des ancres. Mon accueil est pris en sandwich entre mes deux sous-pages et se retrouve donc au milieu. Quand on va sur le site on est donc automatiquement redirigé vers le milieu de page sur l'accueil.
voici le code que j'utilise : 


<meta http-equiv="REFRESH" content="0; URL=index.html#accueil" />

<script language="javascript" type="text/javascript">

var sURL = unescape(window.location.pathname);

function doLoad()
{
    // the timeout value should be the same as in the "refresh" meta-tag
    setTimeout( "refresh()", 0*1 );
}

function refresh()
{
   
    window.location.href = 'index.html#accueil';
}
//-->

</script>


Mais le résultat n'est pas forcément instantané selon la connexion de l'internaute.

Donc je me demandais s'il n'y avait pas une autre solution afin d'être automatiquement redirigé vers l'ancre accueil au chargement de la page...

Merci
Modifié par sarahdel88 (24 Aug 2011 - 15:41)
Bonjour,

Je ne suis pas sûr d'avoir tout saisi, ou alors il manque des informations :
- quel script utilises-tu pour le défilement fluide ?
- lorsque le visiteur arrive sur l'index, un défilement fluide l'amène à une ancre plus bas dans la page ?
- charges-tu un bibliothèque JavaScript dans ta page ?

Merci
a écrit :
- quel script utilises-tu pour le défilement fluide ?

voilà le script que j'utilise pour le défilement fluide, il fonctionne très bien, pas de soucis à ce niveau.


$(function() {
  var scrollElement = $("html");
  var scrollValue = scrollElement.scrollTop();
  if (scrollElement.scrollTop(scrollValue + 1).scrollTop() == scrollValue) {
    scrollElement = $("body");
  }
  else {
    scrollElement.scrollTop(scrollValue);
  }
  $("a[href*=#]").click(function() {
    if (location.hostname+location.pathname+location.search == this.hostname+this.pathname.replace(/^([^\/].*)/, "/$1")+this.search) {
      var hash = "#"+$(this).attr("href").split("#")[1];
      var target = $(hash == "#" ? body : hash);
      if (target.length) {
        var id = target.attr("id");
        target.attr("id", "");
        location.hash = hash;
        target.attr("id", id);
        var to = Math.min(target.offset().top, $(document).height() - $(window).height());
        scrollElement.animate({ scrollTop: to }, {
          duration: Math.abs($(window).scrollTop() - to) * 0.75,
          complete: function() { target.focus(); }
        });
        return false;
      }
    }
  });
});



a écrit :
- lorsque le visiteur arrive sur l'index, un défilement fluide l'amène à une ancre plus bas dans la page ?


en fait je souhaiterai que quand l'internaute va sur le site www.mondomaine.com il arrive directement sur l'ancre #accueil sans défilement pour que ça soit la première chose qu'il voit.

en gros voici la structure de mon site : 

<body>
<div id="corps_de_site">
<div id="section_1_haut"></div>
<div id="accueil"></div>
<div id="section_2_haut"></div>
</div>
</body>


mon code de redirection fonctionne et j'arrive bien sur l'ancre "accueil" au chargement de la page mais si la personne a une mauvaise connexion, il verra la section 1 avant de retomber sur l'accueil. Donc je cherche une solution instantanée.
J'ai triché en rajoutant un vide au dessus de la section 1 pour que les personnes avec une connexion un peu plus lente passe par un blanc avant de retomber sur l'accueil.
j'avoue, dans ma tête c'est clair mais en écrivant, je ne suis pas trop sûr de l'être...

a écrit :
- charges-tu un bibliothèque JavaScript dans ta page ?

oui jQuery pour le défilement et une playlist mp3.

merci
Modifié par sarahdel88 (24 Aug 2011 - 18:17)
Si tu as besoin de rediriger l'utilisateur vers le milieux de ta page quand il arrive dessus c'est que ta page est mal construite et qu'il faut en revoir l'organisation.

Traduction -> j'ai jamais entendu un truc aussi débile.
Modifié par jb_gfx (25 Aug 2011 - 00:47)
c'est un peu violent comme réponse!
mais bon tout le monde à droit à son opinion.

Je vais essayé de modifier le DirectoryIndex dans le .htacess, mais j'avoue je ne sais pas trop comment faire...

en tout cas merci pour les réponses si rapides!
En fait, tu veux faire comme ce site ? http://whoisleon.com
Je ne sais pas comment il a fait, tu peux t'en inspirer.

EDIT : je crois qu'à l'entrée dans le site, il simule un clic vers l'ancre d'id home.
$(document).ready(function() {
	$("a.anchorLink").anchorAnimate()
	if(document.location.hash.length < 1) {
		//document.location = "#home";
		$("a.home.anchorLink").click();
	}
	sliderAutoWidth();
});


Reste à voir si ça peut correspondre. (et les fonctions anchorAnimate etc, je ne sais pas ce que c'est, plugins, fonctions définies autre part ? faudra fouiller)
Modifié par AkaiKen (25 Aug 2011 - 13:33)
merci, j'y jetterai un oeil, ça peut effectivement donner des idées.
même si je ne veux pas de défilement à l'entrée, mais à voir...
Sujet clos
Aller à