11499 sujets

JavaScript, DOM et API Web HTML5

Retour vers le haut automatique

Bonjour à tous,

Je suis en train de créer un portfolio à l'aide du plugin Jquery "Ascensor".
http://kirkas.ch/ascensor/

La navigation de mes pages se fait horizontalement.
PAGE 1 > PAGE 2 > PAGE 3

Chaque page contient plusieurs images, ce qui créer un défilement vertical pour chacune d'entre-elles.
Le problème est que quand je change de page, et que je souhaite retourner à la précédente le contenu défilé auparavant reste sur la même position. (càd en bas)
Je voudrai qu'à chaque fois que l'on clique sur PAGE 1 ou PAGE 2 ou PAGE 3, les contenus reviennent automatiquement vers le haut.

En fait, un peu exactement comme ce site : http://www.designembraced.com/#/NASA.

Pour l'instant mon site est vide, je suis en train d'en créer la base :
<!DOCTYPE html><head>
<link href="styles2.css" type="text/css" rel="stylesheet"  />
<title>Document sans nom</title>


</head>

<body>

<!-- CONTENU -->

<button class='ascensorLinkNext'>Next floor</button>
<button class='ascensorLinkPrev'>Previous floor</button>

<div id='menu'>
<a href="#/UN">UN</a>
<a href="#/DEUX">DEUX</a>
<a href="#/TROIS">TROIS</a>
<a href="#/QUATRE">QUATRE</a>
<a href="#/CINQ">CINQ</a>


</div>

<div id="ascensor"><div>

<!-- Etage1 -->

<div id="UN"></div>
PAGE UNE<br/>
(slide only by <br/>keypress, <br/>swipe, or <br/>drag: only right)<br/><br/>
</div>
        
        
<div>
                <!-- Etage2 -->    

                <div id="DEUX"></div>
PAGE DEUX<br/>
<div id="test"=>TEST(slide only by <br/>keypress, <br/>swipe, or <br/>drag: only right)<br/><br/>
</div>
        </div>
        <div>
                <!-- Etage3 -->
                <div id="TROIS"></div>
PAGE TROIS<br/>
(slide only by <br/>keypress, <br/>swipe, or <br/>drag: only right)<br/><br/>
        </div>  
        <div>
                <!-- Etage4 -->
                <div id="QUATRE"></div>
PAGE AUTRE<br/>
(slide only by <br/>keypress, <br/>swipe, or <br/>drag: only right)<br/><br/>
        </div>
        <div>
                <!-- Etage5 -->
                <div id="CINQ"></div>
PAGE CINQ<br/>
(slide only by <br/>keypress, <br/>swipe, or <br/>drag: only right)<br/><br/>
            
        </div>
</div>


<!-- SCRIPT JQUERY -->

<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script src="jquery.ascensor.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js"></script>

<script>

 $('#ascensor').ascensor({
	 ascensorFloorName: ['UN','DEUX','TROIS','QUATRE','CINQ'],
	direction:'chocolate',
    ascensorMap:[[1,1],[1,2],[1,3],[1,4],[1,5]],
 time: 1000,
 easing: 'easeInOutExpo',
 overflow: 'hidden',
 keyNavigation: false,
 
 
  });
  
  
  
</script>





</body>

</html>


J'espère avoir été clair dans mes propos Smiley biggol

Merci d'avance pour votre précieuse aide.

Smiley cligne
Sujet clos
Aller à