Nupupildi muutumiseks peab pildifail koosnema kahest poolest, millest üks näitab tavalist noolt ja teine ​​aktiivset noolt (hõljuva kursori all). Korraga näidatakse külastajale ainult ühte poolt. Minu ülemine nool on tehtud poolläbipaistvaks, teine ​​on läbipaistmatu (hele).

Antud numbrid on antud pildile, mille mõõtmed on 88 x 250 pikslit (iga noole kõrgus on 125 pikslit). Kui kasutate teist pilti, muutke koodi laiuse ja kõrguse väärtused enda omaks.

Tausta asukoha väärtus on pildi nihe, mis teeb selle veidi üle poole pildi kogu kõrgusest.

Alumine on taane ekraani alumisest servast. Vasak – taane ekraani vasakust servast, siin määratakse see protsentides või saab määrata pikslites, nagu HTML-i puhul. Seal määrati õige parameeter (parem taane) pikslites.

Koodi saab lihtsustada, eemaldades sellelt selle rea:

+ ".scrollTop:hover( background-position:0 -133px;)"

See vastutab kursori hõljutamisel pildi kuvatava osa muutmise eest ja kui selle eemaldate, näeb nupp alati sama välja. Sel juhul pole vaja topeltpildiga pilti panna ühtegi noolt.

Tegin nooltest mitu versiooni ja Internetist leiate palju valmis.

Nagu näete, pole see keeruline. See on tänaseks kõik.

Tere! Skripti näidet näete selles ajaveebis, kui kerite lehte alla, Paremasse alanurka ilmub pildinupp “Tagasi üles”, millel klõpsates jõuad saidi ülemisse päisesse.

Iga pildiga näite alt leiate koodi (skripti), mis tuleb sisestada enne lõpumärgendit ""

Kolm väikest punkti õigeks paigaldamiseks:

Js">

Js">

Js">

Js">

Js">

Js">

Js">

Js">

Js">

0.js">

1.js">

2.js">

3.js">

4.js">

Js">

6.js">

7.js">

8.js">

9.js">

0.js">

1.js">

2.js">

3.js">

4.js">

5.js">

6.js">

7.js">

Kasutajale sellise funktsiooni pakkumiseks on väga lihtne viis. See meetod ei nõua raamatukogude ega täiendavate skriptide kasutamist ning seda tehakse eranditult HTML-i ja soovi korral CSS-i abil, luues tavalise siselingi.

Selle tegemiseks lehe allosas lisage lihtsalt järgmine kood:

Teie saidi stiilidesse, tavaliselt asuvad need failis style.css, peate sisestama: .topbutton ( laius:100px; border:2px solid #ccc; background:#f7f7f7; text-align:center; padding: 10px asukoht: 50px;

Puudused:

JavaScripti abil tehtud nupud võivad olla ujuvad ja ilmuvad kohe, kui kasutaja liigub lehel veidi allapoole, kuid ülaltoodud näites kuvatakse seda pidevalt.

Kerimine ei ole sujuv ja pärast klõpsamist suunatakse kasutaja koheselt lehe ülaossa.

Seda tüüpi nuppude eelised:

Nupu kasutamiseks ei pea te kasutama skripte ega suuri teeke. Ja see on väga suur pluss.

See lahendus võimaldab liikuda lehel nii alla kui üles, kuna koosneb kahest nupust. Nupud asuvad kindlalt lehe vasakus servas. Kerimisel nupud vilguvad sujuvalt.

• Pealkiri: JQUERY üles- ja allakerimisnupud
• Link: 57,72 KB
• Vorming: ZIP-arhiiv

Allalaaditud arhiiv sisaldab kõiki nupu toimimiseks vajalikke faile. Need on CSS-, JS- ja noolepildifailid.

Teine võimalus lehe sisu sujuva kerimise korraldamiseks alt üles, kasutades JQueryt. Nupp asub lehe paremas alanurgas ja ilmub ainult siis, kui kerite lehte veidi allapoole. Kõik realiseeritakse väikese CSS- ja JS-kooditüki ning nupuna kasutatava väikese pildi abil.

Mulle meeldib see nupp, kuna selle loomine ei nõua suurt hulka skripte ja sellel on head efektid.

Nüüd selgitame välja, mida tuleb nupu saidiga ühendamiseks teha

Pilt:

Teil on vaja pilti nupust endast, võite võtta mis tahes või kasutada seda:

HTML kood:

Nupu kutsumiseks peale põhilehe sisu või enne märgendit sisestage järgmine HTML-kood:

CSS-stiilid:

Scrollup (laius: 40 pikslit; kõrgus: 40 pikslit; läbipaistmatus: 0,3; asukoht: fikseeritud; alumine: 50 pikslit; parem: 100 pikslit; kuva: puudub; teksti taane: -9999 pikslit; taust: url ("icon_top.png") no-repeat ;)

Seda koodi kasutades määrame lisaks välimusele ka nupu asukoha ning seame polsterduseks paremalt 100 px ja alt 50 px. Parim on lisada see oma saidi stiililehele.

Esiteks ühendame teegi, kui see pole teie saidiga veel ühendatud. Selleks siltide vahele...? sisestage järgmine:

Seejärel peate kohe pärast teegi lisamist sisestama järgmise JQuery koodi:

Esimene ScrollTop – määrab kerimisriba praeguse vertikaalse asukoha ja kui see ületab 100 px, ilmub nupp automaatselt. Kui soovite, et see ilmuks varem või hiljem, muutke seda väärtust vastavalt vajadusele.

Nagu näete, on veel kaks parameetrit - 0 - mis tähendab, et leht kerib päris algusesse nullpikslini ja 600 - see on animatsiooni kiirus millisekundites.

Juhin teie tähelepanu skriptile, mis vastaval lingil klõpsates lehe sujuvalt üles kerib. Tegin 2 valikut: puhas JavaScript ja jQuery. Valige see, mis teile kõige rohkem meeldib.

Skripti kood:

var t; function up() ( var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop); if(top > 0) ( window.scrollBy(0,-100); t = setTimeout("up() ",20); ) muidu clearTimeout(t); tagastab vale; )

Arv -100 on pikslite arv, mis kerivad üles iga 0,02 sekundi järel (arv 20).

üles

Skripti kood:

(function($) ( $(function() ( $("#up").click(function() ( $("html, body").animate((scrollTop: 0),500); return false; ) ) )) ))(jQuery)

Arv 500 on aeg, mille jooksul toimub animatsioon (kerimine), antud juhul on see pool sekundit.

Peate lehe html-koodis sobivasse kohta lisama järgmise lingi:

üles

Kui JavaScript on brauseris keelatud, siis sellel lingil klõpsates kerib leht ka üles, kuid mitte sujuvalt.

Tere, kallid külastajad!

Jätkan tehniliste artiklite avaldamist.

Ja täna puudutan huvitavat teemat, milles käsitleme saidi lehe ülaossa kerimisnuppu. Räägime selle nupu tähtsusest, nii mulle meeldib seda teha. Samuti näitan teile selle funktsiooni kõige huvitavamaid ja tõhusamaid rakendusi.

Ma arvan, et veebisaitidel ei tasu näidata, kuidas see välja näeb, kuna see on peaaegu igal ressursil. See on lihtne ülesnoole või sõnaga nupp, millel klõpsamine viib teid kiiresti saidi ülemisse piirkonda.

See funktsioon on element, mis teatud juhtudel parandab saidi kasutatavust. Need on juhtumid, mida me nüüd teiega arutame.

Esimene kõige olulisem ja võib-olla ainus juhtum, kui üles nuppu on vaja, on siis, kui lehel on tohutult sisu. Kui leht on pikk, on üsna keeruline üles kerida.

Peate kas kasutama kerimisriba, mida vähesed inimesed kasutavad. Vähemalt ma ei kasuta seda üldse, kuna see on hiire lisaliigutus ja mitte eriti mugav. Või tuleb videot hiire peal keerutada, mis võtab väga kaua aega ja muutub ajapikku tüütuks.

Seega, kui teie saidil on tõesti suuri artikleid, saate nupu installida, kuid peate selle tegema nii, et sellel oleks lihtne klõpsata ja seda on lihtsam teha kui video ketramine või kerimisriba kasutamine brauser. Muidu, mis kasu on sellest, kui see on samaväärne tavatoimingutega?

Selle põhjal on kõige levinumad ja tõhusamad üleskerimise nupud, mis tõesti tõhusalt töötavad. Üks neist valikutest on üles nupp, nagu VKontakte sotsiaalvõrgustikus. Liigume selle meetodi rakendamise juurde.

Selle nupu eripäraks on selle kasutusmugavus. See näeb välja nagu kerimisriba saidi vasakus servas, mis võtab enda alla kogu ressursi kõrguse.

See valik on end juba tõestanud, kuna praktiliselt pole kasutajaid, kes seda sotsiaalmeedias ei kasuta. VKontakte võrk. See teostus on mugav, kuna te ei pea hiirekursorit ühelegi nupule suunama. Lihtsalt klõpsake saidi vasakpoolsel alal ja leht kerib ülaossa. Pole vaja isegi kursorit vaadata, võite lihtsalt liigutada hiire ekraani serva ja klõpsata ühe korra.

Täpselt sama rakendust nagu VKontakte pole võimalik teha, kuid ligikaudne versioon on lihtne.

Selle rakendamiseks peate lihtsalt skripti saidile paigutama.

Skripti laadimiseks võite asetada koodi enda siltide vahele või enne lõpumärgendit faili footer.php. Või võite lihtsalt oma hostimisse üles laadida faili koos skriptiga ja seejärel lihtsalt faili saidile üles laadida.

Kui soovite skripti paigutada ja te ei pea selle laadimise pärast muretsema, siis annan teile skriptikoodi enda.

JavaScript

$(document).ready(function() ( $("body").append("^ Tagasi üles"); $ (window).scroll (funktsioon () ( if ($ (this).scrollTop () > 300) ( $ (.button-up").fadeIn(); ) else ( $ (.button-up").fadeOut(); ) )); function( )( $("body,html").animate(( scrollTop: 0 ), 100; return false; )); .animate (( "läbipaistmatus":"1", )).css(("background-color":"#E1E7ED","color":"#45688E")), function())( $(this). animeerima (( "läbipaistmatus":"0,7" )).css(("taust":"puudub","värv":"#45688E"); ));

Selles koodis saate mõnda parameetrit vastavalt oma vajadustele muuta.

• 4. rida vastutab lehe kerimisala enda kuvamise eest. See sisaldab nupu kuvamise põhistiile. põhimõtteliselt peaksid need parameetrid sobima peaaegu kõigile. Kuid võib-olla peate neid enda jaoks sobivaks muutma;
• 7. real sulgudes on number 300, mis vastutab nupu ilmumise hetke eest. See tähendab, et nupp ilmub alles pärast 300 piksli võrra allapoole kerimist. Soovitan siin valida väärtuse, et kerimine oleks võimalik ainult siis, kui saidi peamenüü või mõni muu navigeerimisel olev oluline element vaatest kaob;
• Real 17 on väärtus 100 kerimiskiirus. Mida väiksem väärtus, seda kiiremini naaseb lehe ülaossa.

Selle koodi saab paigutada saidi ülaosas olevate siltide vahele. Kui sait on WordPressis, asub see ala header.php mallifailis. Võite selle asetada ka saidi (fail footer.php) allosas oleva sulgemismärgi ette. Soovitan viimast varianti, kuna see kiirendab saidi laadimist. See näeb välja selline.

Veelgi tõhusam võimalus on laadida see skript eraldi failist. Faili saate alla laadida alloleva nupu abil. See asub arhiivi sees.

Seejärel laadige see fail oma hostimisse. Saate selle üles laadida teemakausta või saidi juure. Traditsiooni kohaselt teen seda mallikaustas. Seejärel peaksite samasse kohta kirjutama koodi, mis selle faili laadib. Selleks kasutage järgmist rida.

JavaScript

Selles peate asendama faili täieliku tee teisel real teie omaga. Seejärel kleepige see kood samasse piirkonda enne sulgevat silti, nagu allpool näidatud.

Pärast faili redigeerimist, kui tegime seda arvutis, laadime selle hostimisse ja asendame algse faili. Pärast seda töötab teie saidil lihtne üles nupp.

Selle faili parameetrite muutmiseks peate selle avama Notepadi redaktori abil.

See valik on oma lihtsuse tõttu väga hea nii töötamisel kui ka kohapeal paigaldamisel. Täpsem valik on see, kui lisaks üleskerimisele on teil võimalus naasta kohta, kust kerisite. Just seda võimalust rakendatakse sotsiaalmeedias. VKontakte võrk. Kuidas seda teha, vaata allpool.

Salvestasin selle meetodi abil üksikasjaliku videoõpetuse.

See valik on nüüd minu blogis. Ma ei ole veel suutnud selle kasulikkust analüüsida. Kuid kui see on ühel Runeti hiiglasel, siis võime julgelt eeldada, et sellest on mingit kasu. Sellises mastaabis on see muidugi mõttetu. Kuid väikese ressursi puhul võite enne selle installimist hoolikalt mõelda. Kuid ma vaatan tulevikku, sellepärast ma selle otsuse tegin.

Teise meetodi rakendamine on veidi keerulisem, kuid protsess peaks olema teile juba tuttav, kui olete oma ressursiga muid tehnilisi probleeme teinud.

Koosneb 3 etapist:

Esiteks peame paigutama skripti, mis muudab kerimise sujuvaks ja värvimuutuse sujuvaks hõljumisel, nii ala enda kui ka öökulli värvi “To Top”, olenevalt lehe alla kerimise kauguselt.

Võite minna kahel viisil, nagu esimesel juhul. Asetage skript ise soovitud piirkonda (vt ülaltoodud punkti) või laadige skript alla faili kaudu. Järgmisena teeme kõik teise meetodi abil, et see oleks tõhus.

Laadige skriptifail alla, kasutades allolevat nuppu.

Asetage fail hostimisse ja laadige fail üles saidi allosas oleva koodi kaudu, nagu tegite varem. Faili nimi on täpselt sama, mis meetodis 1, nii et saate väljundiks kasutada sama koodirea.

⇓ Tagasi ⇑ Üles

Saate selle paigutada saidi lõppu, enne lõpumärgendit faili footer.php.

Seejärel kirjutame kujundusstiilid oma stiilifaili (style.css) ja laadime kõik muudetud failid hostimisse. Siin on stiilid ise.

/* konteineri kirjeldus */ .leftbar-wrap ( asend: fikseeritud; kõrgus: 100%; ülemine: 0; laius: 99px !tähtis; vasakul: 0; ) /* nupu “Ülemine” kirjeldus */ .left -juhtriba ( kõrgus : 100%; ekraan: plokk; tekstidekoratsioon: puudub; ) /* nupu "Tagasi" kirjeldus */ #kerimine tagasi ( ekraan: plokk; kõrgus: 100%; ülemine: 0; ekraan: puudub teksti joondamine: keskele taustavärvi läbipaistvus aktiivse ala lehtede kohal hõljutamisel */ .leftbar-wrap:hover .active-area ( taust: #E1E7ED !important; opacity:0.7 !important; ) /* muudab kursorit hõljutades esiletõstmise veidi heledamaks pealdise kohal */ .leftbar-wrap .active-area:hover ( ) /* nupu silt keskele */ .bar-desc-niz ( üleval: 26% !tähtis; asukoht: suhteline; ekraan: inline-block; ) .bar-desc-top ( ülemine: 10% !tähtis; asukoht : suhteline; ekraan: inline-block )

Sõltuvalt teie ressursi kujundusest ja struktuurist peate nende stiilide mõningaid parameetreid veidi muutma. Näiteks ridadel 47 ja 53 muutke sõnade "Tagasi" ja "Ülemine" taande parameetrit vastavalt lehe ülaosast.

Pärast kõigi failide redigeerimist saame need turvaliselt hostimisse üles laadida ja see meetod töötab. Selle rakendamist näete minu blogis. Tee seda oma tervise nimel.

Liigume edasi järgmise meetodi juurde. See valik sisaldab juba ekraani paremas alanurgas lihtsat nuppu, millel klõpsamine liigub lehe ülaossa.

Nupu rakendamine on samuti väga lihtne ja töötab WordPressi saidil 100%. Ma ei oska midagi öelda HTML-saidi või mõne muu mootori kohta. Katsetage seda.

Peate kopeerima järgmise koodi koos skriptiga saidi allossa enne sulgevat märgendit /

JavaScript

Saidi ülesnupp – rohkem kui 7 tõestatud lahendust – 4,6/5 72 hääle põhjal

Nupp "Tagasi üles" mängib kasutajakogemuse parandamisel suurt rolli, eriti nendel lehtedel, mis on sisust palju ülekoormatud. Ja kuna tänapäeval on saidi jaoks kõige olulisem sisu, siis seda on lehtedel tavaliselt aina rohkem ja parim viis külastaja lehe ülaossa suunamiseks on erinevad spetsiaalsed nupud, kuidas , et teha selles artiklis oma saidi jaoks nupp ülaossa .

Kui saidi leht sisaldab suures koguses sisu, hakkab kasutaja, olles seda lugenud ja lehte teatud punktini või päris alla kerinud, sageli kerima üles, et näha lehe ülaosas asuvaid navigeerimislinke. ja/või sooritada teatud toiminguid.

Kasutajate mugavuse lisamiseks ja oma saidi kasutatavuse üldiseks parandamiseks on kõige parem kasutada saidi jaoks nuppu, millel klõpsates suunatakse kasutaja automaatselt lehe ülaossa.

Kasutajale sellise funktsiooni pakkumiseks on väga lihtne viis. See meetod ei nõua raamatukogude ega täiendavate skriptide kasutamist ning seda tehakse eranditult HTML-i ja soovi korral CSS-i abil, luues tavalise siselingi.

Selle tegemiseks lehe allosas lisage lihtsalt järgmine kood:

^Ülemine

CSS-koodi näide:

Ülemine nupp ( laius: 100 pikslit; ääris: 2 pikslit tahke # ccc; taust: # f7f7f7; teksti joondamine: keskel; polster: 10 pikslit; asukoht: fikseeritud; alumine: 50 pikslit; parem: 50 pikslit; kursor: osuti; värv: # 333; font -perekond: fondi suurus: 12 pikslit - moz-border-radius: 5px;

Puudused:

JavaScripti abil tehtud nupud võivad olla ujuvad ja ilmuvad kohe, kui kasutaja liigub lehel veidi allapoole, kuid ülaltoodud näites kuvatakse seda pidevalt.

Kerimine ei ole sujuv ja pärast klõpsamist suunatakse kasutaja koheselt lehe ülaossa.

Seda tüüpi nuppude eelised:

Nupu kasutamiseks ei pea te kasutama skripte ega suuri teeke. Ja see on väga suur pluss.

Nupp on rakendatud üsna lihtsalt. Selle tööks vajate jQuery teeki, väikest skripti, mis sisaldab jQuery sündmusi, teatud stiile ja DIV-märgendit, mis sisaldab teksti ennast ja vajalikku ID-d.

Nupp töötab brauserites alates versioonidest Firefox 3.0.10 - 3.6.13, Internet Explorer 7 ja 8, Google Chrome, Jquery 1.4.3. Kahjuks nupp IE 6-s ei tööta, aga kas seda on vaja :)?

JQuery JavaScripti kood:

Peate oma saidi kõikidel lehtedel enne märgendit sisestama alloleva koodi. Kui jQuery teek on teie saidiga juba ühendatud, ei pea te esimest rida lisama.

$(function() ( $(window).scroll(function() ( if($(this).scrollTop() != 0) ( $("#toTop").fadeIn(); ) else ( $(" #toTop").fadeOut(); ) )); $("#toTop").click(function() ( $("body,html").animate((scrollTop:0),800; )); ));

Nupule kauni välimuse andmiseks peate lisama järgmised stiilid. Need on kõige parem lisada saidi stiililehele.

#toTop ( laius: 100 pikslit; ääris: 1 piksli ühtlane # ccc; taust: # f7f7f7; teksti joondamine: keskel; polster: 5 pikslit; asukoht: fikseeritud; alumine: 10 pikslit; /* nupu taane lehe alumisest servast*/ paremal: 10px; kursor: värv: #333;

Nupu kutsumiseks lisage märgendi ette järgmine HTML-kood.

^ Ülemine

Lihtne pistikprogramm, mis paneb nupu sujuvalt kuvama ja sellel klõpsamisel sujuvalt üles kerima. Pistikprogrammi kasutamiseks oma saidil ei pea te lehe HTML-i märgistusele silte lisama. Ühendage lihtsalt kõik vajalikud pluginafailid ja see töötab.

Allikad

Esitatav arhiiv sisaldab 3 kausta: css - nupustiili fail, img - pilt ja js kaust, mis sisaldab 4 JavaScripti faili.

JavaScripti failide ühendamine:

Pakkige allalaaditud arhiiv koos allikatega lahti oma saidi mis tahes kausta. Pistikprogrammi kasutamiseks peame lihtsalt ühendama kolm saadaolevatest js-failidest. Nende kaasamiseks lisage enne sulgevat märgendit järgmised failiteed:

$(document).ready(function() ( /* var defaults = ( konteineri ID: "toTop", // fading element id containerHoverID: "toTopHover", // hääbuv elemendi hõljuk id scrollSpeed: 1200, easingType: "linear" ) ; */ $().UItoTop(( easingType: "easeOutQuart" ));

Parandage failide juurde viivad teed vastavalt kataloogile, kus pistikprogrammi failid asuvad.

Pange tähele, et kui olete jQuery teegi varem oma saidiga ühendanud, ei pea te järgmist koodi lisama:

CSS-i lisamine:

Järgmine samm on CSS-stiilide lisamine, ilma nendeta nupp ei tööta. Nende ühendamiseks on kaks võimalust.

Esimene võimalus on lisada CSS-stiilifaili link oma saidi kõikide lehtede siltide vahele.

Ärge unustage lihtsalt faili teed muuta.

Teine võimalus on kopeerida kogu faili ui.totop.css sisu ja kleepida see oma saidi CSS-laaditabeli faili. Teine meetod on ratsionaalsem, kuna see ei nõua tarbetute failide ühendamist.

See lahendus võimaldab liikuda lehel nii alla kui üles, kuna koosneb kahest nupust. Nupud asuvad kindlalt lehe vasakus servas. Kerimisel nupud vilguvad sujuvalt. Seda efekti näete demot vaadates.

Allikad

Allalaaditud arhiiv sisaldab kõiki nupu toimimiseks vajalikke faile. Need on CSS-, JS- ja noolepildifailid.

Ühendage HTML:

Kõigepealt peate saidi kõikidel lehtedel nuppude helistamiseks sisestama HTML-koodi. Selleks asetage allolev tekst vahetult sildi ette.

JavaScripti ühendus:

Kohe pärast HTML-koodi, märgendi ette, asetage vajalike JavaScripti failide ja JQuery koodi kutsumise kood.

$(function() ( var $elem = $("#content"); $("#nav_up").fadeIn("aeglane"); $("#nav_down").fadeIn("aeglane"); $( window).bind("scrollstart", function())( $("#nav_up,#nav_down").stop().animate(("läbipaistmatus":"0.2")); $(window). bind ("scrollstop", function())( $("#nav_up,#nav_down").stop().animate(("läbipaistmatus":"1")); $("#nav_down"). click( function (e) ( $("html, body").animate((scrollTop: $elem.height()), 800; ) $("#nav_up").click(function (e) () $( "html, body").animate((scrollTop: "0px"), 800 ));

JS-failide juurde viivad teed tuleb asendada teie omadega.

Koodi esimene rida sisaldab JQuery teeki, nii et kui olete selle juba varem oma saidiga ühendanud, peate selle eemaldama.

Edasi tuleb veel ühe JS-faili ja teatud funktsioone sisaldava koodi ühendamine, mida tuleb täpsemalt käsitleda. Sest nende abiga saate mõnda nuppude parameetreid muuta. Allpool on kood koos selgitustega:

// sisu on selle div identifikaator, mille sees peaks asuma kogu keritav sisu, kui kogu saidi lehtede sisu asub erinevas ID-s, siis saad selle siia sisestada, sest ilma selleta liiguvad nupud ei tööta $(function( ) ( var $elem = $("#content"); // kasutades kahte järgmist rida, kuvatakse nupud $("#nav_up").fadeIn("aeglane"); $(" #nav_down").fadeIn(" slow"); // kerimisel on nuppudel tuhmumisefekt, seda rakendatakse nende läbipaistvust muutes, nii et muutes indikaatorit 0,2 vahemikus 0,1 kuni 1, saate nende väärtust reguleerida läbipaistvus $(window).bind("scrollstart", function ()( $("#nav_up,#nav_down").stop().animate(("läbipaistmatus":"0.2")); // siin saate sama läbipaistvust reguleerida, kuid hetkel, kui nuppudele vajutatakse, kuvatakse lihtsalt lehel, on vaikeväärtus 1 $(window).bind("scrollstop", function())( $("#nav_up, #nav_down").stop().animate(("läbipaistmatus":"1" )); )); // numbrit 800 muutes saate lehe kerimiskiirust suurendada või vähendada $("#nav_down"). click(function (e) ( $("html, body").animate((scrollTop: $elem .height()), 800); )); // sama mis ülal, aga alla kerimiseks $("#nav_up").click(function (e) ( $("html, body").animate((scrollTop: "0px"), 800; ) ); ));

CSS-ühendus:

CSS-i lisamiseks ühendage lihtsalt lähtearhiivis asuv style.css-fail saidi lehtedega:

Ja parim võimalus oleks kopeerida selle faili stiilid ja kleepida need oma saidi stiilide faili.

Teine võimalus lehe sisu sujuva kerimise korraldamiseks alt üles, kasutades JQueryt. Nupp asub lehe paremas alanurgas ja ilmub ainult siis, kui kerite lehte veidi allapoole. Kõik realiseeritakse väikese CSS- ja JS-kooditüki ning nupuna kasutatava väikese pildi abil.

Mulle meeldib see nupp, kuna selle loomine ei nõua suurt hulka skripte ja sellel on head efektid.

Nüüd selgitame välja, mida tuleb nupu saidiga ühendamiseks teha

Pilt:

Teil on vaja pilti nupust endast, võite võtta mis tahes või kasutada seda:

Nupu kutsumiseks peale põhilehe sisu või enne märgendit sisestage järgmine HTML-kood:

Üles

Scrollup (laius: 40 pikslit; kõrgus: 40 pikslit; läbipaistmatus: 0,3; asukoht: fikseeritud; alumine: 50 pikslit; parem: 100 pikslit; kuva: puudub; teksti taane: -9999 pikslit; taust: url ("icon_top.png") no-repeat ;)

Seda koodi kasutades määrame lisaks välimusele ka nupu asukoha ning seame polsterduseks paremalt 100 px ja alt 50 px. Parim on lisada see oma saidi stiililehele.

Esiteks ühendame teegi, kui see pole teie saidiga veel ühendatud. Selleks siltide vahele...? sisestage järgmine:

Seejärel peate kohe pärast teegi lisamist sisestama järgmise JQuery koodi:

$(document).ready(function())( $(window).scroll(function())( if ($(this).scrollTop() > 100) ( $(.scrollup").fadeIn(); ) else ( $(.scrollup").fadeOut(); ) ); $(.scrollup").click(function())( $("html, body").animate(( scrollTop: 0 ), 600) tagastama vale ));

Esimene ScrollTop – määrab kerimisriba praeguse vertikaalse asukoha ja kui see ületab 100 px, ilmub nupp automaatselt. Kui soovite, et see ilmuks varem või hiljem, muutke seda väärtust vastavalt vajadusele.

Nagu näete, on veel kaks parameetrit - 0 - mis tähendab, et leht kerib päris algusesse nullpikslini ja 600 - see on animatsiooni kiirus millisekundites.

Allikas: http://gazpo.com/2012/02/scrolltop/

Kui kerite lehte teatud arvu tähemärke allapoole, kuvatakse vasakus allservas suur noolega nupp. Kursori hõljutamisel süttib nupp sujuvalt ja klõpsamisel kerib see sujuvalt üles.

Nupu loomiseks kasutatakse noolepilti, CSS-stiile ja JQueryt.

Pilt:

HTML kood:

Nupu helistamiseks kasutage järgmist HTML-koodi:

Tagasi üles

Kuid peate selle asetama otse lehe põhisisu ette, kui asetate selle enne sulgevat silti, siis nupp ei tööta.

Ja veel üks oluline punkt seoses HTML-koodiga. Peate märgendile määrama identifikaatori ülaosa.

Kui sildile on juba konkreetne ID määratud, siis ülal asuvas nupu kutsumiskoodis tuleb #top asendada #teie-id

Nupu polsterdus ja välimus määrati CSS-i abil, et luua viivitusefekt kursori hõljutamisel. Parem on see sisestada oma saidi CSS-faili.

#back-top ( asend: fikseeritud; alumine: 30px; margin-vasak: -150px; ) #back-top a ( laius: 108px; ekraan: plokk; teksti joondamine: keskel; font: 11px/100% Arial, Helvetica , suurtähed: /* üleminek: 1s a:hover (värv: #000; ) /* nooleikoon (span-silt); ( laius: 108 pikslit; kõrgus: 108 pikslit; ekraan: plokk; veeris-alumine: 7 pikslit; taust: #ddd url( up-arrow.png) keskosa kordamiseta /* ümarad nurgad */ -webkit-border-radius: 15px -moz-border-radius: 15px; )

$(document).ready(function())( // peida #back-top first $("#back-top").hide(); // fade in #back-top $(funktsioon () ( $( aken ).scroll(function () ( if ($(this).scrollTop() > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top"). fadeOut ( ) )); // kerige klõpsuga 0px-ni $("#back-top a").click(function () ( $("body,html").animate(( scrollTop: 0 ), 800 );

Esimene rida on JQuery teegi ühendamine, kui teil on see juba ühendatud, siis ärge seda rida lisage. Lisa ülejäänud kood siltide vahele...

Vajadusel saate muuta järgmisi parameetreid:

• 100 on pikslite arv, mille järel nupp pärast kerimist ilmub;
• 0 – see tähendab, et kerimine toimub nullpikslini, st päris ülaossa.
• 800 on kerimise kiirus millisekundites.

Lehe keskele kerimisel ilmub suur poolläbipaistev üles nupp. Teda on raske mitte märgata. Tehtud ainult JQuery ja CSS-i abil.

Mõistame HTML-i:

Nupu töötamiseks tuleb kerimist vajav avalehe sisu paigutada kahe sildi vahele:

Siin pole midagi erilist, lihtsalt kleepige see kood oma saidi CSS-stiilifaili.

#message a ( /* kuva: blokeeri enne peitmist */ kuva: blokeeri; kuva: puudub; /* link on kõigi teiste elementide kohal */ z-indeks: 999; /* link ei peida selle taha teksti */ läbipaistmatus : .8; /* link jääb lehe samale kohale */ asukoht: fikseeritud /* link läheb lehe alaossa */ /* link on keskel */ vasak: 50% margin-left: -160px /* = pool laiusest (teie eelistuse järgi) */ -moz-border-radius: 24px; -webkit-border-radius: 24px (suurus, stiil eelistustele) */ laius: 300px: fondi suurus: 24px;

$(function () ( /* määrake muutujad jõudluse suurendamiseks kohapeal (document.body).children(0).position().top; /* reageerib akna kerimissündmusele */ $window.scroll(function () ( window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function) () ( if($window.scrollTop()