Redimensionnement de fenêtre et scroll

Bonjour j'ai fait un script avec jquery qui me permet,

- D'avoir une seule page sur mon site découper en plusieurs block
- Chaque block prend la taille de la résolution de l'utilisateur
- Chaque block change de taille si l'utilisateur change sa résolution sans recharger.
- Chaque block est accessible via un jolie scroll jquery
- Chaque scroll est recalculer si l’utilisateur redimensionne sa fenêtre.

L'ensemble de mes scenario fonctionne mise a part un qui est le cas ou un utilisateur réduit sa fenêtre et clique sur un lien.
Il se retrouve bien au bon endroit mais il ne lui est plus possible de scroller normalement.

Le bug est présent sur tout les navigateur et je pense que ça viens de ma fonction resize sans arriver a corriger le problème.

Avec vous une idée d’où ça peut venir?

Voici mon code html

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
49
50
51
52
53
54
 
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>01_declaration_d_objets</title>
		<meta name="description" content="" />
		<meta name="author" content="sylvain.bousselier" />
		<link rel="shortcut icon" href="/favicon.ico" />
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
		<link rel="stylesheet" media="all" href="css/commun.css" />
 
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="js/fonctions.js"></script>
 
	</head>
	<body>
		<div id="content">
			<ul id="menu" style="position:absolute;">
				<li>
					<a href="liens1.html" data-link="slide1">slide 1</a>
				</li>
				<li>
					<a href="liens2.html" data-link="slide2">slide 2</a>
				</li>
				<li>
					<a href="liens3.html" data-link="slide3">slide 3</a>
				</li>
				<li>
					<a href="liens4.html" data-link="slide4">slide 4</a>
				</li>
			</ul>
			<div class="slide1 slide">
				slide 1
			</div>
 
			<div class="slide2 slide">
				slide 2
			</div>
 
			<div class="slide3 slide">
				slide 3
			</div>
 
			<div class="slide4 slide">
				slide 4
			</div>
		</div>
	</body>
</html>

Mon code js

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
 
var scrollSlide = {
    init:function(slideHeight){
        if(jQuery('.slide').size()){
        	$('.slide').height(slideHeight);
        	var i;
        	var slideNb = $('.slide').length;
        	for(i = 0; i<=slideNb; i++){
        		var $this = $('.slide')[i];
        		var position = slideHeight * i;
        		$($this).attr('data-pos', position);
        	}
        	scrollSlide.startScroll(slideHeight)
        }
    },
    startScroll:function(slideHeight){
    	$('#menu a').each(function(slideHeight){
    		var $that = this;
 
    		$($that).live('click',function(e){
    			var dataLink = $($that).attr('data-link');
 
    			$('.slide').each(function(slideHeight){
    				if($(this).hasClass(dataLink)){
    					$('body,html').animate({
    						scrollTop: $(this).attr('data-pos')
    					},800)
    				}
    			});
 
    			return false;
    		});
    	});	
    }
};
 
 
$(document).ready(function(){
	var userRes = $(window).height();
 
	scrollSlide.init(userRes);
 
	$(window).resize(function() {
  		userRes = $(window).height();
  		scrollSlide.init(userRes);
	});
 
})

et mon css

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
body, h1,h2,h3,h4,h5,h6,p,ul,li{
	margin:0;
	padding:0;
}
 
.slide1{
	background-color:pink;
}
 
.slide2{
	background-color:green;
}

Si vous voulez l'essayer chez vous

Merci par avance pour votre aide