Load page directement sur une ancre

**yeste64** · 16/09/2011, 09h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

**SpaceFrog** · 16/09/2011, 09h44

pourquoi passer par animate alors ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou mettre directement un left dans le css sans passer par js ...

**yeste64** · 16/09/2011, 11h33

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

**SpaceFrog** · 16/09/2011, 13h30

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**yeste64** · 19/09/2011, 19h50

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...

**SpaceFrog** · 19/09/2011, 20h51

avec quel code ?

**yeste64** · 19/09/2011, 21h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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") ?

**SpaceFrog** · 19/09/2011, 21h57

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

tu as une animation,je n'en ai pas ...

**yeste64** · 19/09/2011, 21h58

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

Load page directement sur une ancre

JavaScript

Discussions similaires

Partager

Partager