scrollToTop sans jQuery en pur javascript

Continuant dans ma démarche de me défaire de jQuery, je réécris petit à petit les fonctionnalités dont j'ai besoin mais qui ne nécessitent pas de sortir l'artillerie lourde. Je vous propose aujourd'hui ma version de scrollToTop.

Le script est autonome. Il est à placer en pied de page, idéalement dans un fichier séparé.

Point important, la balise body doit avoir l'index "top". Il n'est plus nécessaire d'ajouter un id à la balise body.

/*
# ------------------ BEGIN LICENSE BLOCK ------------------
#
# This file is part of SIGesTH
#
# Copyright (c) 2009 - 2014 Cyril MAGUIRE, (!Pragmagiciels)
# Licensed under the CeCILL v2.1 license.
# See http://www.cecill.info/licences.fr.html
#
# ------------------- END LICENSE BLOCK -------------------
*/
;(function(window,undefined) {

    'use_strict';

    var timeOut;
    var isIE = isIE();
    var bodyTag = document.getElementsByTagName('body');
    var idOfBody = bodyTag[0].getAttribute('id');
    if (idOfBody == null) {
        idOfBody = 'top';
        bodyTag[0].setAttribute('id', 'top');
    }

    function isIE() {
        var nav = navigator.userAgent.toLowerCase();
        return (nav.indexOf('msie') != -1) ? parseInt(nav.split('msie')[1]) : false;
    }

    function backToTop() {
        if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){
            window.scrollBy(0,-50);
            timeOut=setTimeout('backToTop()',40);
        }
        else {
            clearTimeout(timeOut);
        }
    }

    function getScrollPosition() {
        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);
    }

    function Remove(idOfParent,idToRemove) {
        if (isIE) {
            document.getElementById(idToRemove).removeNode(true);
        } else {
            var Node1 = document.getElementById(idOfParent); 
            var len = Node1.childNodes.length;
            
            for(var i = 0; i < len; i++){           
                if (Node1.childNodes[i] != undefined && Node1.childNodes[i].id != undefined && Node1.childNodes[i].id == idToRemove){
                    Node1.removeChild(Node1.childNodes[i]);
                }
            }
        }   
    }

    function addElement(idOfParent,idToAdd,htmlToInsert) {
        var DomParent = document.getElementById(idOfParent);//id of body
        var newdiv = document.createElement('div');

        newdiv.setAttribute('id',idToAdd);
        newdiv.innerHTML = htmlToInsert;

        DomParent.appendChild(newdiv);
    }

    function displayBackButton() {
        var pos = [];
        var fleche = '\u21E7';

        if (isIE) {
            fleche = '\u25B2';
        }
        pos = getScrollPosition();
        var topLink = document.getElementById('toplink');
        if (pos[1] > 150) {
            if (topLink == null) {
                addElement(idOfBody,'toplink','<a href="#" onclick="backToTop();return false;">'+fleche+'</a>');
            }
        } else {
            if (topLink != null) {
                Remove(idOfBody,'toplink');
            }
        }
    }

    //add to global namespace
    window.onscroll = displayBackButton;
    window.displayBackButton = displayBackButton;
    window.backToTop = backToTop;


})(window);

Et la css qui va avec :

#toplink {
    position: fixed;
    bottom: 20px;
    width: 100px;
    text-align: center;
    right:10px;
}
#toplink a { 
	font-size: 40px;
	opacity: 0.8;
}

Je l'ai testé sur Firefox, IE 8, Safari et Opera. Je n'ai pas eu de souci. Merci de me dire si vous en rencontrez.

Vous en avez un aperçu sur mon site.

J'en ai profité pour mettre à jour le plugin pour Pluxml.

Enjoy !