Lien vers une zone ciblée de la page avec défilement(doux) : Problème.

Bonjour à tous,

voilà en fait, j'ai installé sur mon site, un système de navigation avec un menu en haut qui, quand on clique sur un lien, dirige plus bas sur la page vers une balise de texte.

Cela marche impeccablement si ce n'est que le défilement doux n'est pas présent.

Voici les codes.

- JS :

/* Smooth scrolling
   Changes links that link to other parts of this page to scroll
   smoothly to those links rather than jump to them directly, which
   can be a little disorienting.
   
   sil,  http://www.kryogenix.org/
 
   
   v1.0 2003-11-11
   v1.1 2005-06-16 wrap it up in an object
*/

var ss = {
  fixAllLinks: function() {
    // Get a list of all links in the page
    var allLinks = document.getElementsByTagName('a');
    // Walk through the list
    for (var i=0;i<allLinks.length;i++) {
      var lnk = allLinks[i];
      if ((lnk.href && lnk.href.indexOf('#') != -1) && 
          ( (lnk.pathname == location.pathname) ||
	    ('/'+lnk.pathname == location.pathname) ) && 
          (lnk.search == location.search)) {
        // If the link is internal to the page (begins in #)
        // then attach the smoothScroll function as an onclick
        // event handler
        ss.addEvent(lnk,'click',ss.smoothScroll);
      }
    }
  },

  smoothScroll: function(e) {
    // This is an event handler; get the clicked on element,
    // in a cross-browser fashion
    if (window.event) {
      target = window.event.srcElement;
    } else if (e) {
      target = e.target;
    } else return;

    // Make sure that the target is an element, not a text node
    // within an element
    if (target.nodeName.toLowerCase() != 'a') {
      target = target.parentNode;
    }
  
    // Paranoia; check this is an A tag
    if (target.nodeName.toLowerCase() != 'a') return;
  
    // Find the <a name> tag corresponding to this href
    // First strip off the hash (first character)
    anchor = target.hash.substr(1);
    // Now loop all A tags until we find one with that name
    var allLinks = document.getElementsByTagName('a');
    var destinationLink = null;
    for (var i=0;i<allLinks.length;i++) {
      var lnk = allLinks[i];
      if (lnk.name && (lnk.name == anchor)) {
        destinationLink = lnk;
        break;
      }
    }
    if (!destinationLink) destinationLink = document.getElementById(anchor);

    // If we didn't find a destination, give up and let the browser do
    // its thing
    if (!destinationLink) return true;
  
    // Find the destination's position
    var destx = destinationLink.offsetLeft; 
    var desty = destinationLink.offsetTop;
    var thisNode = destinationLink;
    while (thisNode.offsetParent && 
          (thisNode.offsetParent != document.body)) {
      thisNode = thisNode.offsetParent;
      destx += thisNode.offsetLeft;
      desty += thisNode.offsetTop;
    }
  
    // Stop any current scrolling
    clearInterval(ss.INTERVAL);
  
    cypos = ss.getCurrentYPos();
  
    ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
    ss.INTERVAL =
setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);
  
    // And stop the actual click happening
    if (window.event) {
      window.event.cancelBubble = true;
      window.event.returnValue = false;
    }
    if (e && e.preventDefault && e.stopPropagation) {
      e.preventDefault();
      e.stopPropagation();
    }
  },

  scrollWindow: function(scramount,dest,anchor) {
    wascypos = ss.getCurrentYPos();
    isAbove = (wascypos < dest);
    window.scrollTo(0,wascypos + scramount);
    iscypos = ss.getCurrentYPos();
    isAboveNow = (iscypos < dest);
    if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
      // if we've just scrolled past the destination, or
      // we haven't moved from the last scroll (i.e., we're at the
      // bottom of the page) then scroll exactly to the link
      window.scrollTo(0,dest);
      // cancel the repeating timer
      clearInterval(ss.INTERVAL);
      // and jump to the link directly so the URL's right
      location.hash = anchor;
    }
  },

  getCurrentYPos: function() {
    if (document.body && document.body.scrollTop)
      return document.body.scrollTop;
    if (document.documentElement && document.documentElement.scrollTop)
      return document.documentElement.scrollTop;
    if (window.pageYOffset)
      return window.pageYOffset;
    return 0;
  },

  addEvent: function(elm, evType, fn, useCapture) {
    // addEvent and removeEvent
    // cross-browser event handling for IE5+,  NS6 and Mozilla
    // By Scott Andrew
    if (elm.addEventListener){
      elm.addEventListener(evType, fn, useCapture);
      return true;
    } else if (elm.attachEvent){
      var r = elm.attachEvent("on"+evType, fn);
      return r;
    } else {
      alert("Handler could not be removed");
    }
  } 
}

ss.STEPS = 25;

ss.addEvent(window,"load",ss.fixAllLinks);

- HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
		<meta name="verify-v1" content="5PDYBp2T0WMU6axnhikFx9q1vd1/LLkU5XOqJ0aoIPs=" />

	<title>Simon SOURIS -  Photographe // Graphiste // Designer</title>

		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="apple-touch-icon" href="favicon.png"/>

		<meta name="author" content="Simon Souris" />
		<meta name="Description" content="Site du jeune Simon Souris, artiste en graphisme, photographie, design, motion, cr&eacute;ation de site web et bien d'autres." />

		<meta name="Keywords" content="Simon,Souris,SOURIS,photographe,photogaphie,graphisme,design,designer,graphiste,belgique,hainaut,mons,belge" />

		<meta http-equiv="Content-language" content="fr" />
		<meta name="category" content="Graphisme" />
		<meta name="distribution" content="global" />
		<meta name="rating" content="General" />
		<meta name="expires" content="never" />
		<meta name="date-creation-yyyymmdd" content="20071101" />
		<meta name="geo.country" content="Belgium" />
		<meta name="audience" content="all" />
		<meta name="copyright" content="Copyright (c) 2008 Simon SOURIS" />
		<meta name="doc-rights" content="All Rights Reserved" />
					
		<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
		
		<script src="smoothscroll.js"></script>
			
		<!--[if lte IE 6]>
		<script src="http://www.savethedevelopers.org/say.no.to.ie.6.js"></script>
		<link rel="stylesheet" href="css/ie6.css" type="text/css" media="screen" />
		<![endif]-->

	</head>
	<body>
	
		<div id="content">
		<!-- Contenu du site -->
		
			<div id="top">
			<!-- Balise du haut -->
			
				<h1><!-- Simon Souris --></h1>
				
				<div id="presentation">
				<p class="hello">Bienvenue sur le portfolio de <em>Simon Souris</em></p>
				<p class="subtitle">Photographe, Graphiste & Designer</p>
				</div>
				
				<ul id ="menunav">
				<!-- Menu de navigation -->
					<li><a href="#1">Introduction</a></li>
					<li><a href="#2">En savoir plus</a></li>
					<li><a href="#3">Travaux</a></li>
					<li><a href="#4">Contact</a></li>
					<li><a href="#5">Autre</a></li>
				</ul>
			
			<!-- Fin de la balise du haut -->
			</div>
			
			<div id="introduction">
			<!-- Balise d'introduction -->
			
				<h2><a name="1">Introduction</a></h2>
			
				<div id="description">
				
					<img alt="" height="200px" src="img/simonsouris.jpg" width="750px" />
				
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum 
					 bibendum metus. Sed sem sem, molestie et, venenatis eget, susc ipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa 
					 diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas 
					 volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tel lus vitae 
					 ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p>
					 
					 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum 
					 bibendum metus. Sed sem sem, molestie et, venenatis eget, susc ipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa 
					 diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas 
					 volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tel lus vitae 
					 ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p>
				
					<div id="link"><p><a href="#top">Back to top</a></p></div>
					
				</div>
			
			<!-- Fin de la balise d'introduction -->
			</div>
			
			<div id="en-savoir-plus">
			<!-- Balise de description de Simon Souris -->
			
				<h2><a name="2">En savoir plus</a></h2>
			
				<div id="description">
				<!-- Balise de description -->
				
					<div id="left">
					<!-- Colonne de gauche -->
					
					<h3>Biographie</h3>
					
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum 
					 bibendum metus. Sed sem sem, molestie et, venenatis eget, susc ipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa 
					 diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas 
					 volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tel lus vitae 
					 ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p>
					 
					<!-- Fin de la colonne de gauche -->
					</div>
					
					<div id="right">
					<!-- Colonne de droite -->
					
					<h3>Derniers articles</h3>
					
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna.</p>
					 
					 <h3>Retrouvez le sur</h3>
					 
					 <ul id="plus">
					 	<li>Behance</li>
					 	<li>Facebook</li>
					 	<li>Flickr</li>
					 	<li>Youtube</li>
					 	<li>Vimeo</li>
					 </ul>
					 					 
					<!-- Fin de la colonne de droite -->
					</div>
				
					<div id="link"><p><a href="#top">Back to top</a></p></div>
					
				<!-- Fin de la balise de description -->
				</div>
			
			<!-- Balise d'introduction -->
			</div>
			
			<div id="travaux">
			
				<h2><a name="3">Travaux</a></h2>
				
				<div id="description">
					
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum 
					 bibendum metus. Sed sem sem, molestie et, venenatis eget, susc ipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa 
					 diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas 
					 volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tel lus vitae 
					 ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p>
					 
					 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum 
					 bibendum metus. Sed sem sem, molestie et, venenatis eget, susc ipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa 
					 diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas 
					 volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tel lus vitae 
					 ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p>
					
					<div id="link"><p><a href="#top">Back to top</a></p></div>
					
				</div>
			
			</div>
			
			<div id="contact">
			
				<h2><a name="4">Contact</a></h2>
			
				<div id="description">
				
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum 
					 bibendum metus. Sed sem sem, molestie et, venenatis eget, susc ipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa 
					 diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas 
					 volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tel lus vitae 
					 ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p>
					 
					 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum 
					 bibendum metus. Sed sem sem, molestie et, venenatis eget, susc ipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa 
					 diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas 
					 volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tel lus vitae 
					 ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p>
				
					<div id="link"><p><a href="#top">Back to top</a></p></div>
					
				</div>
			
			</div>
			
			<div id="cv">
			
				<h2><a name="5">Autre</a></h2>
			
				<div id="description">
				
					<img alt="" src="#" />
				
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum 
					 bibendum metus. Sed sem sem, molestie et, venenatis eget, susc ipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa 
					 diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas 
					 volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tel lus vitae 
					 ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p>
					 
					 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper, 
					rutrum ac, enim. Nullam pretium interdum metus. Ut in neque. Vivamus ut lorem vitae turpis porttitor tempor. Nam consectetuer
					 est quis lacus. Mauris ut diam nec diam tincidunt eleifend. Vivamus magna. Praesent commodo egestas metus. Praesent condimentum 
					 bibendum metus. Sed sem sem, molestie et, venenatis eget, susc ipit quis, dui. Morbi molestie, ipsum nec posuere lobortis, massa 
					 diam aliquet pede, tempor ultricies neque tortor sit amet nisi. Suspendisse vel quam in nisl dictum condimentum. Maecenas 
					 volutpat leo vitae leo. Nullam elit arcu, ullamcorper commodo, elementum nec, dictum nec, augue. Maecenas at tel lus vitae 
					 ante fermentum elementum. Ut auctor ante et nisi. Suspendisse sagittis tristique eros.</p>
				
					<div id="link"><p><a href="#top">Back to top</a></p></div>
					
				</div>
			
			</div>
			
			<div id="footer"><p class="copyright">Copyright (c) <strong>Simon Souris</strong> 2008.</p></div>
		
		
		<!-- Fin des balises -->
		</div>
		
		<!-- Google Analytics Javascript -->
		<script type="text/javascript">
		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
	
		<script type="text/javascript">
		var pageTracker = _gat._getTracker("UA-3641373-1");
		pageTracker._initData();
		pageTracker._trackPageview();
		</script>
		<!--  Fin du code Google Analytics -->

	
	</body>
</html>

Et le lien vers le site proposant ce code : ICI [/i][/i]
Modifié par simon-s (24 Sep 2008 - 20:00)

Je ne me suis pas plongé dans tout ton code, mais moi j'aurais plutôt tendance à passer par la fonction Effect.ScrollTo de Scriptaculous...
Une ligne de code suffirait... En plus, l'effet est encore plus "smooth" puisque le scroll accélère et ralentit progressivement...
Modifié par yakou32 (01 Oct 2008 - 01:15)

Hello,

Et sans page en ligne, difficile de voir ce qui ne va pas dans ton code