Load page directement sur une ancre

Version imprimable

16/09/2011, 09h29
yeste64

Load page directement sur une ancre
Bonjour à tous,

Je réalise actuellement un site one page horizontal.
Je possède trois écrans et mon écran d'accueil est celui du milieu.

Je voudrais en fait que lorsque l'utilisateur arrive sur mon site, il soit automatiquement sur ma div du milieu.

J'aimerais donc savoir s'il est possible de rediriger un visiteur directement vers une ancre.

Je le fais actuellement avec jquery et sa fonction scrollLeft de cette manière :
Code:

1 2 3 $('html, body').stop().animate({ scrollLeft: $('#home').offset().left }, 750);
Le problème avec cette méthode c'est que l'utilisateur a un bref aperçu du contenu du site (la div de gauche en l'ocurrence) avant même d'avoir navigué dessus.. J'aimerais donc rediriger automatiquement vers la div du milieu, sans effet.

Merci d'avance pour votre aide!
16/09/2011, 09h44
SpaceFrog

pourquoi passer par animate alors ???

Code:

$('html, body').css({left:750});

ou mettre directement un left dans le css sans passer par js ...
16/09/2011, 11h33
yeste64

Justement, ceci ne fonctionne pas, ma page reste toute à gauche..

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<style type="text/css">
html, body {
      margin:0;
	padding:0;
 
	}
body {width:100%;
overflow:auto;
height:100%;
}	
.pag {	
 
	float : left;
     	position : relative;
	width : 20%;
	font-size : 24px;
 
	}
 
 
</style>
<script type="text/javascript">
$(function(){
 $("body").scrollLeft($('.pag:eq(2)').offset().left)
})
 
</script>
 
</head>
<body>
<div style="width:400%">
<div class="pag"> 
page 1
</div>
<div class="pag"> 
page 2
</div>
<div class="pag"> 
page3
</div>
<div class="pag"> 
page 4
</div>
</div>
 
</body>
 
</html>

19/09/2011, 19h50
yeste64

Quand j'utilise ton exemple j'arrive bien à la bonne ancre directement, et pourtant si je fais la même chose dans ma page d'accueil, j'ai une animation...
19/09/2011, 20h51
SpaceFrog

avec quel code ?

Je ne voulais pas surcharger le post car les codes sont longs mais il vaut mieux les mettre.. Je charge deux fichiers au début de ma page d'index :

premier fichier :
Code:

1 2 3 4 5 6 7 8 9 $(function() { $('div.pages a').bind('click',function(){ var anchor = $(this); $('html, body').stop().animate({scrollLeft: $(anchor.attr('href')).offset().left}, 1000,'easeInOutQuad'); }); });
deuxième fichier :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 $(document).ready(function() { $("a").anchorAnimate() }); jQuery.fn.anchorAnimate = function(settings) { settings = jQuery.extend({ speed : 1100 }, settings); return this.each(function(){ var caller = this $(caller).click(function (event) { event.preventDefault() var locationHref = window.location.href var elementClick = $(caller).attr("href") var destination = $(elementClick).offset().top; $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() { window.location.hash = elementClick }); return false; }) }) }
(J'ai enlevé tout le code superflux et inutile)

Je pense qu'ils sont responsables de cette animation

EDIT : J'ai réussi à précharger ma page directement sur l'ancre désirée sans animation. Cependant, j'aimerais que si l'utilisateur actualise le site en se trouvant sur une autre page que la page d'accueil, l'effet soit présent pour le coup. Comme ça l'utilisateur comprendra qu'il est redirigé vers la page d'accueil. Mais je ne sais pas si c'est possible :

En gros, de différencier une actualisation depuis la page d'accueil ou une autre page du site (sachant que par "page", j'entends "ancre") ?

19/09/2011, 21h57
SpaceFrog

tu utilises animate()
j'utilise css() ...

tu as une animation,je n'en ai pas ...
19/09/2011, 21h58
yeste64

J'ai résolu le problème d'animation. J'ai edité mon post :)