[Sommaire] [Imprimer]

   1  /* Smooth scrolling
   2     Changes links that link to other parts of this page to scroll
   3     smoothly to those links rather than jump to them directly, which
   4     can be a little disorienting.
   5     
   6     sil, http://www.kryogenix.org/
   7     
   8     v1.0 2003-11-11
   9     v1.1 2005-06-16 wrap it up in an object
  10  */
  11  
  12  var ss = {
  13    fixAllLinks: function() {
  14      // Get a list of all links in the page
  15      var allLinks = document.getElementsByTagName('a');
  16      // Walk through the list
  17      for (var i=0;i<allLinks.length;i++) {
  18        var lnk = allLinks[i];
  19        if ((lnk.href && lnk.href.indexOf('#') != -1) && 
  20            ( (lnk.pathname == location.pathname) ||
  21          ('/'+lnk.pathname == location.pathname) ) && 
  22            (lnk.search == location.search)) {
  23          // If the link is internal to the page (begins in #)
  24          // then attach the smoothScroll function as an onclick
  25          // event handler
  26          ss.addEvent(lnk,'click',ss.smoothScroll);
  27        }
  28      }
  29    },
  30  
  31    smoothScroll: function(e) {
  32      // This is an event handler; get the clicked on element,
  33      // in a cross-browser fashion
  34      if (window.event) {
  35        target = window.event.srcElement;
  36      } else if (e) {
  37        target = e.target;
  38      } else return;
  39  
  40      // Make sure that the target is an element, not a text node
  41      // within an element
  42      if (target.nodeName.toLowerCase() != 'a') {
  43        target = target.parentNode;
  44      }
  45    
  46      // Paranoia; check this is an A tag
  47      if (target.nodeName.toLowerCase() != 'a') return;
  48    
  49      // Find the <a name> tag corresponding to this href
  50      // First strip off the hash (first character)
  51      anchor = target.hash.substr(1);
  52      // Now loop all A tags until we find one with that name
  53      var allLinks = document.getElementsByTagName('a');
  54      var destinationLink = null;
  55      for (var i=0;i<allLinks.length;i++) {
  56        var lnk = allLinks[i];
  57        if (lnk.name && (lnk.name == anchor)) {
  58          destinationLink = lnk;
  59          break;
  60        }
  61      }
  62    
  63      // If we didn't find a destination, give up and let the browser do
  64      // its thing
  65      if (!destinationLink) return true;
  66    
  67      // Find the destination's position
  68      var destx = destinationLink.offsetLeft; 
  69      var desty = destinationLink.offsetTop;
  70      var thisNode = destinationLink;
  71      while (thisNode.offsetParent && 
  72            (thisNode.offsetParent != document.body)) {
  73        thisNode = thisNode.offsetParent;
  74        destx += thisNode.offsetLeft;
  75        desty += thisNode.offsetTop;
  76      }
  77    
  78      // Stop any current scrolling
  79      clearInterval(ss.INTERVAL);
  80    
  81      cypos = ss.getCurrentYPos();
  82    
  83      ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
  84      ss.INTERVAL =
  85  setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);
  86    
  87      // And stop the actual click happening
  88      if (window.event) {
  89        window.event.cancelBubble = true;
  90        window.event.returnValue = false;
  91      }
  92      if (e && e.preventDefault && e.stopPropagation) {
  93        e.preventDefault();
  94        e.stopPropagation();
  95      }
  96    },
  97  
  98    scrollWindow: function(scramount,dest,anchor) {
  99      wascypos = ss.getCurrentYPos();
 100      isAbove = (wascypos < dest);
 101      window.scrollTo(0,wascypos + scramount);
 102      iscypos = ss.getCurrentYPos();
 103      isAboveNow = (iscypos < dest);
 104      if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
 105        // if we've just scrolled past the destination, or
 106        // we haven't moved from the last scroll (i.e., we're at the
 107        // bottom of the page) then scroll exactly to the link
 108        window.scrollTo(0,dest);
 109        // cancel the repeating timer
 110        clearInterval(ss.INTERVAL);
 111        // and jump to the link directly so the URL's right
 112        location.hash = anchor;
 113      }
 114    },
 115  
 116    getCurrentYPos: function() {
 117      if (document.body && document.body.scrollTop)
 118        return document.body.scrollTop;
 119      if (document.documentElement && document.documentElement.scrollTop)
 120        return document.documentElement.scrollTop;
 121      if (window.pageYOffset)
 122        return window.pageYOffset;
 123      return 0;
 124    },
 125  
 126    addEvent: function(elm, evType, fn, useCapture) {
 127      // addEvent and removeEvent
 128      // cross-browser event handling for IE5+,  NS6 and Mozilla
 129      // By Scott Andrew
 130      if (elm.addEventListener){
 131        elm.addEventListener(evType, fn, useCapture);
 132        return true;
 133      } else if (elm.attachEvent){
 134        var r = elm.attachEvent("on"+evType, fn);
 135        return r;
 136      } else {
 137        alert("Handler could not be removed");
 138      }
 139    } 
 140  }
 141  
 142  ss.STEPS = 25;
 143  
 144  ss.addEvent(window,"load",ss.fixAllLinks);