"Back to top" - Kodas HTML

Balandžio 23, 2011

Sveiki, taigi prireike man kodo ant HTML tokio, kuris butu taip:

Paeini zemyn tinklapyje, ir sone atsiranda mygtukas"Back To Top" ( Sugrysti i virsu).

Vakar ieskojau Google, bet radau tiktai tokius kad gali ydeti ta mygtuka y kuria nori vieta, o man reikia kad jisai atsirastu kaip paeini zemyn.

Jeigu kas zinote kokia pamoka numeskite linka.. Busiu Dekingas, nes pats nerandu. :)

Dekui is anksto kas pagelbes. :)

Balandžio 23, 2011

Pasidarai mygtuką, tada ant window.onscroll evento su JS darai funkciją, kad jei window.pageYOffset daugiau už nulį, tai deda display: block (ar inline, ar whatever) ant to mygtuko, jeigu nulis, tai display: none :)

Balandžio 23, 2011

Pasidarai mygtuką, tada ant window.onscroll evento su JS darai funkciją, kad jei window.pageYOffset daugiau už nulį, tai deda display: block (ar inline, ar whatever) ant to mygtuko, jeigu nulis, tai display: none :)

Gal galetum placiau? Arba kokia pamokos nuoroda numesti? :)

Balandžio 23, 2011

Manyčiau, kad pakankamai normaliai paaiškinau, bet tiek to. Jei su jQuery, tai:

HTML:

<a class="ivirsu" href="#virsus">Grįžti į viršų</a>

CSS:

.ivirsu {
   display: none;
   position: fixed;
   bottom: 20px;
}

JS:

function scroll() {
   if (window.pageYOffset > 0) {
       $('.ivirsu').css('display','block')
   }
   else if (window.pageYOffset == 0) {
       $('.ivirsu').css('display','none')
   }
   else {
       alert('WTF HAPPENED?')
   }
}
window.onscroll = scroll;

Netikrinau, bet turėtų veikti.

EDIT: pataisyta, sumaišiau vieną raidelę ir neveikė :)

Redagavo Balandžio 23, 2011 Silke

Balandžio 23, 2011

Manyčiau, kad pakankamai normaliai paaiškinau, bet tiek to. Jei su jQuery, tai:

HTML:

<a class="ivirsu" href="#virsus">Grįžti į viršų</a>

CSS:

.ivirsu {
   display: none;
   position: fixed;
   bottom: 20px;
}

JS:

function scroll() {
   if (window.pageYOffset > 0) {
       $('.ivirsu').css('display','block')
   }
   else if (window.pageYOffset == 0) {
       $('.ivirsu').css('display','none')
   }
   else {
       alert('WTF HAPPENED?')
   }
}
window.onscroll = scroll;

Netikrinaum, bet turėtų veikti.

Dekui, Bandysiu kazka daryti.. :) Beje kur ta JS: Kelti? :)

Balandžio 23, 2011

Dekui, Bandysiu kazka daryti.. :) Beje kur ta JS: Kelti? :)

Patogiausia bus į <head> tagą įterpti:

<script type="text/javascript>
// kodas kodas kodas
</script>

Balandžio 23, 2011

Patogiausia bus į <head> tagą įterpti:
<script type="text/javascript>
// kodas kodas kodas
</script>

Blemba, ykeliau viska, bet rodo dabar balta ekrana tiktai.. :huh:

HTML ir JS ykeliau y <head>..

O Css pridejau prie kitu css..

Balandžio 23, 2011

Į head tik js reikia

Balandžio 23, 2011

Blemba, ykeliau viska, bet rodo dabar balta ekrana tiktai.. :huh:

HTML ir JS ykeliau y <head>..
O Css pridejau prie kitu css..

O pas tave tuščias HTML yra? Tada pasidaryk tarkim:

<div id="virsus" style="height:2000px"></div>

Su tokiu ir aš testavau, na, kad atsirastų scrollbaras. Ir tada bandyk scrollint :)

Į head tik js reikia

Taip, HTML keliam į body :)

Redagavo Balandžio 23, 2011 Silke

Balandžio 23, 2011

O pas tave tuščias HTML yra? Tada pasidaryk tarkim:
<div id="virsus" style="height:2000px"></div>
Su tokiu ir aš testavau, na, kad atsirastų scrollbaras. Ir tada bandyk scrollint :)

Taip, HTML keliam į body :)

Ikeliu JS y <head> ir pasidaro baltas vaizdas.

HTML netuscias yra.. :)

Balandžio 23, 2011

Parodyk visą tinklalapio kodą (geriausia pastebin.com).

Balandžio 23, 2011

Parodyk visą tinklalapio kodą (geriausia pastebin.com).

Atsiusu visa koda y PM tau, gerai? :)

Balandžio 23, 2011

Atsiusu visa koda y PM tau, gerai? :)

Ok, siųsk tik.

Balandžio 23, 2011

Kam taip sudėtingai?

Pas mane bloge:

<div id="virsun"> 
   <div class="title"><a href="#">Į puslapio viršų!</a></div> 
</div>

Tiek ir užtenka.

Šitas kodas iš esmės ir turėtų pakelti tavo puslapį iki pat viršaus. O jei nori animuotai, naudok JQuery.

Redagavo Balandžio 23, 2011 nagisa

Balandžio 23, 2011

Nu jau susitvarkiau. Silke padejo. :)

Prisijungti

"Back to top" - Kodas HTML

Rekomenduojami pranešimai

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Dabar naršo 0 narių

Prisijunk prie bendruomenės dabar!

Naujausios temos

Karštos temos