In acest tutorial JavaScript e prezentat un script, in doua variante, care adauga in pagina un buton pentru derulare la inceputul paginii, butonul e adaugat doar cand utilizatorul deruleaza pagina in jos, mai mult decat inaltimea ferestrei.
Ideea e simpla, se inregistreaza un eveniment onscroll care detecteaza derularea paginii si verifica pozitia barei de derulare. Daca pozitia barei de derulare e mai mult decat inaltimea ferestrei navigatorului web, si butonul nu este in pagina, il adauga. Iar cand utilizatorul deruleaza pagina in sus si pozitia barei de derulare devine mai mica decat inaltimea ferestrei, si butonul e in pagina, il sterge.
Astfel, butonul apare in pagina doar cand e necesar. Explicatii sunt si in comentariile din cod.


- Ca sa testati acest script, derulati aceasta pagina in jos; butonul va apare in partea dreapta, cu pozitie fixa.

• Ca sa includeti acest script in pagina dv., adaugati urmatorul cod in zona <head> </head> a documentului HTML.
Grafica si pozitia butonului pot fi definite din codul CSS.
<style type="text/css"><!--
#scrtop {
 position:fixed;
 top:80%;
 right:10px;
 width:29px;
 height:31px;
 background-color:yellow;
 border:2px solid blue;
 cursor:pointer;
 text-align:center;
 font-family:Calibri, Arial, sans-serif;
 line-height:15px;;
 font-size:11px;
 padding:0;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 -khtml-border-radius:10px;
 border-radius:10px;
}
#scrtop b {
 display:block;
 margin:2px auto -1px auto;
 font-size:21px;
 padding:0;
}
--></style>
<script type="text/javascript"><!--
/* Adaugare buton pentru derulare la inceputul paginii: marplo.net/javascript/ */

// functie pt. obtinere inaltime fereastra
function getBrowsHeight() {
  if (self.innerHeight) var brows_height = self.innerHeight;
  else if (document.documentElement && document.documentElement.clientHeight) {
    var brows_height = document.documentElement.clientHeight;
  }
  else if (document.body) var brows_height = document.body.clientHeight;

  return brows_height;
}

// functie pt. obtinere pozitia barei de derulare
function scrollY() {
  return window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
}

var brows_height = getBrowsHeight();         // inaltime fereastra

// inregistrare eveniment detectare derulare pagina
window.onscroll = function() {
  var scrl_pos = scrollY();                // pozitia barei de derulare

  // daca pozitia barei de derulare e mai mult decat 110% din brows_height, si nu este element '#scrtop'
  // adauga buton pt. derulare la inceputul paginii
  // altfel, daca pozitia barei de derulare e mai mica decat 110% din brows_height, si este element '#scrtop'
  // sterge butonul pt. derulare la inceputul paginii
 if(scrl_pos > (brows_height * 1.1) && !document.getElementById('scrtop')) {
   document.body.innerHTML += '<div id="scrtop" onclick="scrollTo(0,0)"><b>&uArr;</b>TOP</div>';
 }
 else if(scrl_pos < (brows_height * 1.1) && document.getElementById('scrtop')) {
   document.body.removeChild(document.getElementById('scrtop'));
 }
}
--></script>

Buton de derulare la inceputul paginii - varianta 2

Iata o alta varianta, mai sigura, ce creaza acelasi efect. De aceasta data, tag-urile HTML pt. buton sunt adaugate direct in codul HTML, initial ascuns. Scriptul face butonul vizibil cand e necesar.
- Folositi aceasta versiune daca prima varianta afecteaza alte scripturi JavaScript din pagina care lucreaza cu evenimente JS. Aceasta se poate intampla fiindca butonul e adaugat dinamic in codul HTML si afecteaza structura DOM.

- Ca sa includeti acesta varianta in pagina, adaugati urmatorul cod CSS in zona <head> </head> a documentului HTML.
<style type="text/css"><!--
#scrtop {
 display:none;
 position:fixed;
 top:80%;
 right:10px;
 width:29px;
 height:31px;
 background-color:yellow;
 border:2px solid blue;
 cursor:pointer;
 text-align:center;
 font-family:Calibri, Arial, sans-serif;
 line-height:15px;;
 font-size:11px;
 color:blue;
 padding:0;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 -khtml-border-radius:10px;
 border-radius:10px;
}
#scrtop span {
 display:block;
 margin:2px auto -1px auto;
 font-size:21px;
 font-weight:800;
 padding:0;
}
--></style>
Apoi adaugati urmatorul cod JavaScript in zona BODY, la sfarsitul paginii, inainte de tagul de inchidere </body>.
<div id="scrtop" onclick="scrollTo(0,0);"><span>&uArr;</span>TOP</div>
<script type="text/javascript"><!--
/* Adaugare buton pentru derulare la inceputul paginii: marplo.net/javascript/ */

// functie pt. obtinere inaltime fereastra
function getBrowsHeight() {
  if (self.innerHeight) var brows_height = self.innerHeight;
  else if (document.documentElement && document.documentElement.clientHeight) {
    var brows_height = document.documentElement.clientHeight;
  }
  else if (document.body) var brows_height = document.body.clientHeight;

  return brows_height;
}

// functie pt. obtinere pozitia barei de derulare
function scrollY() {
  return window.pageYOffset ? window.pageYOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
}

var brows_height = getBrowsHeight();         // inaltime fereastra

// register event on scroll window
window.onscroll = function() {
  var scrl_pos = scrollY();                // pozitia barei de derulare

  // daca pozitia barei de derulare e mai mult decat 110% din brows_height, face '#scrtop' vizibil
  // altfel, daca pozitia barei de derulare e mai mica decat 110% din brows_height, ascunde '#scrtop'
 if(scrl_pos > (brows_height * 1.1)) {
   document.getElementById('scrtop').style.display = 'block';
 }
 else if(scrl_pos < (brows_height * 1.1)) {
   document.getElementById('scrtop').style.display = 'none';
 }
};
--></script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce element HTML adauga continut flash SWF in pagina web?
<object> <div> <script>
<object type="application/x-shockwave-flash" data="file.swf" width="500" height="250">
 <param name="src" value="file.swf" />
 Browser-ul dv. nu suporta SWF.
</object>
Care pseudo-clasa CSS adauga un stil la un camp input de formular cand e cursorul in el?
:active :focus :hover
input:focus {
  background-color: #88fe88;
}
Clic pe instructiunea care transforma un sir JSON in obiect JavaScript.
JSON.stringify(javascript_object) object.toString() JSON.parse(json_string)
var jsnstr = '{"url": "http://coursesweb.net/", "title": "Web Development Courses"}';
var obj = JSON.parse(jsnstr);
alert(obj.url);
Indicati functia PHP care poate crea sau scrie un fisier pe server.
fopen() file_put_contents() file_get_contents()
if (file_put_contents("file.txt", "content")) echo "Fisierul a fost creat";
else echo "Fisierul nu poate fi creat";
Cum se spune "al treilea" in engleza?
threeth third three
I planted the third tree.
- Am plantat al treilea pom.
Cum se spune "al treilea" in spaniola?
segundo tres tercero
Yo planté el tercero árbol.
- Am plantat al treilea pom.
Adaugare buton derulare la inceputul paginii

Last accessed pages

  1. Substantive - Exercitii si teste engleza incepatori (12702)
  2. Creare link-uri (6793)
  3. Articolul din limba engleza - The article (27799)
  4. Curs HTML gratuit Tutoriale HTML5 (34470)
  5. Prepozitii - Exercitii si teste engleza incepatori (3973)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1987)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1687)
  3. Trecutul simplu si continuu - Past Tense Simple and Continuous (1589)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1449)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1172)