Load page directement sur une ancre [Résolu]

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

16/09/2011, 09h44	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	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 ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

19/09/2011, 20h51	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	avec quel code ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

19/09/2011, 21h57	#8
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	tu utilises animate() j'utilise css() ... tu as une animation,je n'en ai pas ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/09/2011, 11h33	#3
yeste64 Membre à l'essai Développeur Web Inscription : mai 2011 Messages : 85 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : Communication - Médias Informations forums : Inscription : mai 2011 Messages : 85 Points : 21 Points : 21	Justement, ceci ne fonctionne pas, ma page reste toute à gauche..
	00

19/09/2011, 19h50	#5
yeste64 Membre à l'essai Développeur Web Inscription : mai 2011 Messages : 85 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : Communication - Médias Informations forums : Inscription : mai 2011 Messages : 85 Points : 21 Points : 21	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...
	00

19/09/2011, 21h58	#9
yeste64 Membre à l'essai Développeur Web Inscription : mai 2011 Messages : 85 Détails du profil Informations personnelles : Sexe : Localisation : France Informations professionnelles : Activité : Développeur Web Secteur : Communication - Médias Informations forums : Inscription : mai 2011 Messages : 85 Points : 21 Points : 21	J'ai résolu le problème d'animation. J'ai edité mon post
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email