ScrollToTop sans jQuery - via Ecyseo

Mots-clés
|
  1. /*
  2. # ------------------ BEGIN LICENSE BLOCK ------------------
  3. #
  4. # This file is part of SIGesTH
  5. #
  6. # Copyright (c) 2009 - 2014 Cyril MAGUIRE, (!Pragmagiciels)
  7. # Licensed under the CeCILL v2.1 license.
  8. # See http://www.cecill.info/licences.fr.html
  9. #
  10. # ------------------- END LICENSE BLOCK -------------------
  11. */
  12. ;(function(window,undefined) {
  13.  
  14.     'use_strict';
  15.  
  16.     var timeOut;
  17.     var isIE = isIE();
  18.     var bodyTag = document.getElementsByTagName('body');
  19.     var idOfBody = bodyTag[0].getAttribute('id');
  20.     if (idOfBody == null) {
  21.         idOfBody = 'top';
  22.         bodyTag[0].setAttribute('id', 'top');
  23.     }
  24.  
  25.     function isIE() {
  26.         var nav = navigator.userAgent.toLowerCase();
  27.         return (nav.indexOf('msie') != -1) ? parseInt(nav.split('msie')[1]) : false;
  28.     }
  29.  
  30.     function backToTop() {
  31.         if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
  32.             window.scrollBy(0,-50);
  33.             timeOut=setTimeout('backToTop()',40);
  34.         }
  35.         else {
  36.             clearTimeout(timeOut);
  37.         }
  38.     }
  39.  
  40.     function getScrollPosition() {
  41.         return Array((document.documentElement && document.documentElement.scrollLeft) || window.pageXOffset || self.pageXOffset || document.body.scrollLeft,(document.documentElement && document.documentElement.scrollTop) || window.pageYOffset || self.pageYOffset || document.body.scrollTop);
  42.     }
  43.  
  44.     function Remove(idOfParent,idToRemove) {
  45.         if (isIE) {
  46.             document.getElementById(idToRemove).removeNode(true);
  47.         } else {
  48.             var Node1 = document.getElementById(idOfParent);
  49.             var len = Node1.childNodes.length;
  50.            
  51.             for(var i = 0; i < len; i++){          
  52.                 if (Node1.childNodes[i] != undefined && Node1.childNodes[i].id != undefined && Node1.childNodes[i].id == idToRemove){
  53.                     Node1.removeChild(Node1.childNodes[i]);
  54.                 }
  55.             }
  56.         }  
  57.     }
  58.  
  59.     function addElement(idOfParent,idToAdd,htmlToInsert) {
  60.         var DomParent = document.getElementById(idOfParent);//id of body
  61.         var newdiv = document.createElement('div');
  62.  
  63.         newdiv.setAttribute('id',idToAdd);
  64.         newdiv.innerHTML = htmlToInsert;
  65.  
  66.         DomParent.appendChild(newdiv);
  67.     }
  68.  
  69.     function displayBackButton() {
  70.         var pos = [];
  71.         var fleche = '\u21E7';
  72.  
  73.         if (isIE) {
  74.             fleche = '\u25B2';
  75.         }
  76.         pos = getScrollPosition();
  77.         var topLink = document.getElementById('toplink');
  78.         if (pos[1] > 150) {
  79.             if (topLink == null) {
  80.                 addElement(idOfBody,'toplink','<a href="#" onclick="backToTop();return false;">'+fleche+'</a>');
  81.             }
  82.         } else {
  83.             if (topLink != null) {
  84.                 Remove(idOfBody,'toplink');
  85.             }
  86.         }
  87.     }
  88.  
  89.     //add to global namespace
  90.     window.onscroll = displayBackButton;
  91.     window.displayBackButton = displayBackButton;
  92.     window.backToTop = backToTop;
  93.  
  94.  
  95. })(window);

Télécharger

Et la CSS associée

  1. #toplink {
  2.     position: fixed;
  3.     bottom: 20px;
  4.     width: 100px;
  5.     text-align: center;
  6.     right:10px;
  7. }
  8. #toplink a {
  9.         font-size: 40px;
  10.         opacity: 0.8;
  11. }

Télécharger

source ScrollToTop sans jQuery - Ecyseo