Cet article décrit l'utilisation du positionnement absolu de JS pour réaliser l'effet de retour au sommet. Partagez-le pour votre référence, comme suit:
<! 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"> <éad- head> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" /> <tame> positionnement absolu de la bouton supérieur </ title> <style type = "text / css"> corps {marge: 0px; padding: 0px; hauteur: 2500px; fond: # 6f0024;} # div1 {largeur: 120px; hauteur: 34px; droite: 4px; en bas: 5px; curseur: pointeur; arrière-plan: URL (images / totop.png) No-Repeat; Position: Fixed; _Position: Absolute; Affichage: Aucun;} </ Style> <Script Type = "Text / JavaScript"> // Fonction d'affichage de positionnement Absolute GetCroll (ID) {var obj = document.getElementById (id); var timer = null; Positionfixed (OBJ); if (obj) {obj.style.display = 'Aucun'; window.onscroll = function () {getCrollTop ()> 0? obj.style.display = "bloc": obj.style.display = "Aucun"; } obj.onclick = function () {var timer = setInterval (slow, 10); fonction smove () {setscrollTop (getScrollTop () / 1.5); if (getScrollTop () <1) ClearInterval (temporisateur); }}}}} // juge ie6 function positionfixed (obj) {var ie6 =! - [1,] &&! Window.xmlhttprequest; if (obj) {var top = obj.offsetTop; if (ie6) {document.DocumentElement.Style.TextOverflow = "EllipSis"; obj.style.position = "Absolute"; obj.style.setExpression ("top", "eval (documentElement.scrolltop +" + top + ') + "px"'); }}} // Obtenez la barre de scroll topfunction getCrollTop () {return document.documentElement.scrolltop || document.body.scrolltop;} // Retour vers les fonctions supérieures setScrollTop (valeur) {document.DocumentElement.ScrollTop = valeur; document.body.scrolltop = value;} window.onload = function () {getScroll ('div1');}; </cript> </ head> <body> <div id = "div1"> </div> </body> </html>Pour plus d'informations sur le contenu lié à JavaScript, veuillez consulter les sujets de ce site: "Résumé des effets et techniques de commutation JavaScript", "Résumé des effets et techniques de recherche JavaScript", "Résumé des erreurs Javascript et des techniques de débogage" Algorithmes et techniques de traversée JavaScript ", et" Résumé de l'utilisation des opérations mathématiques JavaScript "
J'espère que cet article sera utile à la programmation JavaScript de tous.