11548 sujets

JavaScript, DOM et API Web HTML5

Jquery Anchor Scroll et Div en 100%

Bonjour,

J'ai un souci concernant une page et le JQuery Anchor Scroll.

En gros, j'ai créé deux Div en 100% sur ma page (largeur et hauteur), ce qui fait qu'on arrive sur la premiere image (en gros), mais cela ne représente que 50% du total de la page. Lorsque l'on scroll, on arrive petit à petit sur la 2ème image en-dessous qui est aussi en 100% (hauteur et largeur également).

Maintenant, j'aimerais bien mettre en place l'"Anchor Scroll" afin de permettre, lorsque l'on clique sur le lien prévu à cet effet, d'arriver d'une manière douce en transition, sur l'image du dessous. Hors, après pas mal de script testé (donc les plus connus), cela ne fonctionne pas.

Est-ce du juste au 100% ?

Ou est-ce du à du parallax que j'ai également mis dans la première Div (et qui fonctionne bien de son côté).

Merci d'avance si vous arrivez à me trouver des pistes, car cela fait pas mal de temps que je me bats pour tenter de mettre cela en place, et je n'y arrive malheureusement pas.

PS : Bon week-end à tous Smiley cligne
Hello.

Je vois deux solutions pour résoudre ton problème : demander à Mme Soleil, ou nous fournir un exemple en ligne (au pire, un morceau de code reproduisant juste ton erreur et pas plus).
Bonjour, voici une bonne partie de mon code :



Code HTML :

a écrit :
<div id="container">
<ul class="items">
<li class="item item1">

<div class="inner inner4"></div>
<div class="inner inner3"></div>
<div class="inner inner2"></div>

<div class="inner inner7"></div>
<div class="inner inner6"></div>
<div class="inner inner5"></div>
<div class="inner inner1"></div>
<div class="containerprincipal">
<div class="textebidon"><a href="#anchorTarget" class="anchorLink">test ancre</a></div>

</div>

</li>
<li class="item item2">
<a name="anchorTarget" id="anchorTarget" ><div class="inner inner2"></div></a>
<div class="inner inner1"></div>
</li>

</ul>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://github.com/protonet/jquery.inview/raw/master/jquery.inview.min.js"></script>
<script src="jquery.scrollParallax.min.js"></script>
<script src="scripts.js"></script>



Code CSS :

* {
	margin:0;
	height:0;
}

html {
	height:100%;
}

body {
	height:100%;
}

#container {
	width:100%;
	height:100%;
	position:absolute;
}

.items{
	width:100%;
	height:100%;
}
	.item{
		width:100%;
		overflow:hidden;
		position:relative;
		height:100%;
	}
		.inner,.inner-lev1,.inner-lev2{
			width:100%;
			height:100%;
			position:absolute;
			z-index:1;
		}
	
/* parallax images */
#container .inner4{
	background:url(parralax-police/bg.jpg) 50% 0px fixed no-repeat;
	
}
.item1	.inner1{
	background:url(parralax-police/perso-brassard.png) 35% 450px no-repeat;
	}
	
.item1	.inner5 {
	background:url(parralax-police/bandes.png) 10% 0px no-repeat;
}

.item1	.inner6 {
	background:url(parralax-police/thecall.png) 21% 20px no-repeat;
}

.item1	.inner7 {
	background:url(parralax-police/police.png) 20% 300px no-repeat;
	

}
	
.item1	.inner3{
		background: url(parralax-police/carre.png) 50% 0px fixed no-repeat;
	}

.item1	.inner2{
		background: url(parralax-police/bg_repeat.png) 50% 0px fixed;
	}

	
	
.item2{
	background: white url(image2.jpg) 0% 0% fixed no-repeat;
}

.item2	.inner1{
		background: url(cross.png) 0% 0% fixed no-repeat;
	}

.item2	.inner2{
		background: url(logo.png) 0% 0% fixed no-repeat;
	}
	
#container .containerprincipal {
	width:400px;
	margin:0 auto;
}
	
	
#container .textebidon {
	width:400px;
	height:40px;
	display:block;
	margin:0 auto;
	position:absolute;
	bottom:50px;
	z-index:1;
	font:30px Verdana, Geneva, sans-serif;
	color:#000;
	text-align:center;
	background:#FFF;
	}


JQUERY de l'ancre :

a écrit :
$(document).ready(function() {
$("a.anchorLink").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;
})
})
}



PS : Désolé pour l'énorme tartine !
Bonjour,

Rappel:
dapidu a écrit :
PS : Désolé pour l'énorme tartine !

Florian_R a écrit :
nous fournir un exemple en ligne (au pire, un morceau de code reproduisant juste ton erreur et pas plus)

Mon commentaire:
1. Je ne suis pas sûr que le code fournit permettrait de reproduire le problème. En fait j'en doute très fort (il faudrait avoir les images, recréer une page complète appelant jQuery et les plugins jQuery utilisés, etc.). Et puis dans tous les cas je vais pas passer dix minutes à recréer une page de test qui reproduit le problème, hein, c'est le boulot de la personne qui demande de l'aide ça. Smiley cligne
2. Il y a marqué «au pire», c'est pas tout à fait par hasard.

Donc: une page en ligne.
Florian_R a écrit :
Re.

Ça marchera mieux en appelant ton plugin jquery.anchor.js après jQuery.


Yep, ca marche nickel sur FF, Chrome, Opéra et safari (sauf sur explorer, mais rien ne m'étonne avec ce navigateur).

Merci beaucoup.
Bonjour,

je suis tombé par hasard sur le topic (en venant voir le mien lol) et je me permets de venir y dire un mot parce qu'ayant été intrigué par le sujet, j'ai cliqué sur le lien de test pour voir.
Je suis sur Mac, Safari 5.06. Et si jamais la page qui s'affiche est la bonne, alors il y a visiblement un problème.

Si j'ai bien compris, il y a 2 backgrounds homothétiques (je genre jquery "ezBgResize()"). Et le but est que via l'ancre, on scroll la page vers sa partie inférieure, pour passer de l'un à l'autre. C'est bien ça ?

Ceci pour dire qu'en cliquant sur l'ancre, si certes le scroll s'effectue vers le bas de la fenêtre et que le second background s'affiche, néanmoins, son affichage est tronqué en haut par un grande bande blanche. Comme si le bas du premier background s'affichait encore. Il faut alors cliquer légèrement sur la vraie scrollbarre de Safari pour que ce bug visuel disparaisse et que le background 2 s'affiche pleine page...

Enfin, et après avoir bien relu l'exposé du problème, je dois dire aussi que :
1) Le parallax vertical fonctionne, mais n'est pas réellement flagrant. Ce n'est que parce que j'ai lu son existence ici que je m'en suis aperçu en ligne.
2) En revanche, il est question de transition douce entre les 2 backgrounds : totalement inopérant. On passe brutalement de l'image 1 à la 2 via l'ancre. Sur le même principe que les basiques ancres html...

Je pense donc que la technique n'est pas au point... J'espère que malgré tout cela aidera.

Cordialement,
Neum

NOTA BENE : si maintenant la page qui est restée en ligne pour ce topic n'est pas celle corrigée, ce serait bienvenue et très sympathique de la remplacer par celle opérationnelle, afin que l'on puisse juger concrètement du rendu définitif pérenne. Par avance : merci.
Modifié par Neum (24 Oct 2011 - 12:16)
Sujet clos
Aller à