Larawan para sa pindutan

Upang magbago ang imahe ng button, ang file ng imahe ay dapat na binubuo ng dalawang halves, ang isa ay nagpapakita ng isang regular na arrow, at ang isa ay nagpapakita ng isang aktibong arrow (sa ilalim ng hovering cursor). Isang kalahati lamang ang ipinapakita sa bisita sa isang pagkakataon. Ang aking tuktok na arrow ay ginawang translucent, ang pangalawa ay opaque (maliwanag).

Ang mga ibinigay na numero ay ibinigay para sa isang imahe na may sukat na 88 by 250 pixels (bawat arrow ay 125 pixels ang taas). Kung gumagamit ka ng isa pang imahe, pagkatapos ay baguhin ang lapad at taas na mga halaga sa code sa iyong sarili.

Ang value ng background-position ay ang offset ng imahe, na ginagawa itong bahagyang higit sa kalahati ng buong taas ng imahe.

Sa ibaba ay ang indentation mula sa ibabang gilid ng screen. Kaliwa – indent mula sa kaliwang gilid ng screen, dito ito ay tinukoy bilang isang porsyento, o maaaring tukuyin sa mga pixel, tulad ng nangyari sa HTML. Doon, ang tamang parameter (kanang indent) ay tinukoy sa mga pixel.

Ang code ay maaaring gawing simple sa pamamagitan ng pag-alis ng linyang ito mula dito:

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

Responsibilidad nitong baguhin ang ipinapakitang bahagi ng larawan kapag ini-hover mo ang cursor, at kung aalisin mo ito, palaging magiging pareho ang hitsura ng button. Sa kasong ito, hindi mo kakailanganin ang isang larawan na may dobleng larawan;

Gumawa ako ng ilang mga bersyon ng mga arrow, at sa Internet maaari kang makahanap ng maraming mga handa na.

Tulad ng nakikita mo, hindi ito mahirap. Iyon lang para sa araw na ito. Hello! Isang halimbawang script ang makikita sa blog na ito kapag nag-scroll ka pababa sa pahina,

Sa ilalim ng bawat halimbawa na may larawan ay makikita mo ang isang code (script) na dapat ipasok bago ang pansarang tag na ""

Tatlong maliliit na punto para sa tamang pag-install:

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">

Mayroong isang napaka-simpleng paraan upang mabigyan ang gumagamit ng ganoong pag-andar. Ang pamamaraang ito ay hindi nangangailangan ng paggamit ng anumang mga aklatan o karagdagang mga script at ginagawa ito ng eksklusibo gamit ang HTML at, kung nais, gamit ang CSS, sa pamamagitan ng paglikha ng isang ordinaryong panloob na link.

Upang gawin ito saanman sa ibaba ng iyong pahina, idagdag lamang ang sumusunod na code:

Sa mga istilo ng iyong site, kadalasan ang mga ito ay matatagpuan sa style.css file, kailangan mong ipasok ang: .topbutton ( width:100px; border:2px solid #ccc; background:#f7f7f7; text-align:center; padding: 10px;

Mga kapintasan:

Ang mga button na ginawa gamit ang JavaScript ay maaaring lumulutang at agad na lumitaw sa sandaling ang user ay lumipat ng kaunti pababa sa pahina, ngunit sa halimbawa sa itaas ay patuloy itong ipapakita.

Hindi magiging maayos ang pag-scroll at pagkatapos i-click ang user ay agad na mai-redirect sa tuktok ng pahina.

Ang mga bentahe ng ganitong uri ng pindutan:

Upang patakbuhin ang button, hindi mo kailangang gumamit ng mga script o malalaking aklatan. At ito ay isang napakalaking plus.

Binibigyang-daan ka ng solusyong ito na ilipat ang parehong pababa at itaas ng pahina dahil binubuo ito ng dalawang mga pindutan. Ang mga pindutan ay nakapirming matatagpuan sa kaliwang bahagi ng pahina. Kapag nag-scroll, ang mga pindutan ay kumikislap nang maayos.

• Pamagat: Mag-scroll pataas at pababa ng mga button sa JQUERY
• Link: 57.72 KB
• Format: ZIP archive

Ang na-download na archive ay maglalaman ng lahat ng mga file na kinakailangan para gumana ang button. Ang mga ito ay CSS, JS file at arrow image file.

Ang isa pang pagpipilian para sa pag-aayos ng maayos na pag-scroll ng nilalaman ng pahina, mula sa ibaba hanggang sa itaas, gamit ang JQuery. Ang pindutan ay matatagpuan sa kanang ibaba ng pahina at lilitaw lamang kung mag-scroll ka pababa ng pahina nang kaunti. Ang lahat ay ipinatupad gamit ang isang maliit na piraso ng CSS at JS code, pati na rin ang isang maliit na imahe na ginamit bilang isang pindutan.

Gusto ko ang button na ito dahil ang paglikha nito ay hindi nangangailangan ng malaking bilang ng mga script at ito ay may magagandang epekto.

Ngayon, alamin natin kung ano ang kailangang gawin para ikonekta ang button sa site

Larawan:

Kakailanganin mo ng larawan ng mismong button, maaari kang kumuha ng anuman, o maaari mong gamitin ito:

HTML code:

Upang tumawag ng isang button pagkatapos ng nilalaman ng pangunahing pahina o bago ang isang tag, ilagay ang sumusunod na HTML code:

Mga istilo ng CSS:

Scrollup( width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url("icon_top.png") hindi na mauulit ;)

Gamit ang code na ito, bilang karagdagan sa hitsura, tinutukoy namin ang posisyon ng button at itinakda ang padding sa 100 px mula sa kanan at 50 px mula sa ibaba. Pinakamainam na idagdag ito sa stylesheet ng iyong site.

Una, ikinonekta namin ang library kung hindi pa ito nakakonekta para sa iyong site. Para sa layuning ito sa pagitan ng mga tag...? ipasok ang sumusunod:

Pagkatapos, kaagad pagkatapos isama ang library, kailangan mong ilagay ang sumusunod na JQuery code:

Ang unang ScrollTop - tinutukoy ang kasalukuyang vertical na posisyon ng scroll bar at kung ito ay naging higit sa 100 px, awtomatikong lilitaw ang button. Kung gusto mo itong lumitaw nang mas maaga o mas bago, baguhin ang halagang ito kung kinakailangan.

Tulad ng nakikita mo, may dalawa pang parameter - 0 - na nangangahulugang mag-i-scroll ang page hanggang sa simula hanggang sa zero pixel, at 600 - ito ang bilis ng animation sa millisecond.

Dinadala ko sa iyong pansin ang isang script na maayos na nag-i-scroll sa pahina sa itaas kapag nag-click ka sa kaukulang link. Gumawa ako ng 2 pagpipilian: purong JavaScript at jQuery. Piliin ang isa na pinakagusto mo.

Code ng script:

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); ) else clearTimeout(t); return false; )

Ang numerong -100 ay ang bilang ng mga pixel na nag-i-scroll pataas bawat 0.02 segundo (ang numerong 20).

pataas

Code ng script:

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

Ang bilang na 500 ay ang oras kung kailan nangyayari ang animation (pag-scroll), sa kasong ito ito ay kalahating segundo.

Kailangan mong idagdag ang sumusunod na link sa naaangkop na lugar sa html code ng pahina:

pataas

Kung hindi pinagana ang JavaScript sa browser, kapag nag-click ka sa link na ito, mag-i-scroll din ang page sa itaas, ngunit hindi maayos.

Kumusta, mahal na mga bisita!

Patuloy akong naglalathala ng mga teknikal na artikulo.

At ngayon ay hawakan ko ang isang kawili-wiling paksa kung saan tatalakayin natin ang scroll button sa tuktok ng pahina sa site. Pag-uusapan natin ang kahalagahan ng button na ito, kung saan gusto kong gawin ito. Ipapakita ko rin sa iyo ang pinakakawili-wili at epektibong pagpapatupad ng function na ito.

Sa tingin ko, hindi sulit na ipakita kung ano ang hitsura nito sa mga website, dahil halos lahat ng mapagkukunan ay mayroon nito. Ito ay isang simpleng button na may pataas na arrow o isang salita na, kapag na-click, mabilis kang dadalhin sa pinakatuktok na bahagi ng site.

Ang function na ito ay isang elemento na, sa ilang mga kaso, nagpapabuti sa kakayahang magamit ng site. Ito ang mga kaso kung saan tatalakayin namin ngayon sa iyo.

Ang unang pinakamahalaga, at marahil ang tanging kaso kapag kailangan ang up na button ay kapag mayroong malaking halaga ng nilalaman sa pahina.

Kung mahaba ang pahina, mahirap mag-scroll sa pinakatuktok.

Kailangan mong gamitin ang scroll bar, na kakaunti ang gumagamit. Hindi bababa sa hindi ko ito ginagamit, dahil ito ay isang dagdag na paggalaw ng mouse at hindi masyadong maginhawa. O kailangan mong paikutin ang video sa mouse, na tumatagal ng napakatagal at nagiging nakakainis sa paglipas ng panahon.

Samakatuwid, kung ang iyong site ay may talagang malalaking artikulo, maaari kang mag-install ng isang pindutan, ngunit kailangan mong gawin ito upang madali itong i-click at mas madaling gawin ito kaysa sa pag-ikot ng isang video o paggamit ng scroll bar sa browser. Kung hindi, ano ang pakinabang nito kung ito ay katumbas ng mga karaniwang aksyon?

Up button tulad ng VKontakte

Ang pagpipiliang ito ay napatunayan na mismo, dahil halos walang mga gumagamit na hindi gumagamit nito sa social media. network ng VKontakte. Maginhawa ang pagpapatupad na ito dahil hindi mo kailangang itutok ang cursor ng mouse sa anumang button. Mag-click lamang sa kaliwang bahagi ng site at ang pahina ay mag-scroll sa pinakatuktok. Hindi na kailangang panoorin ang cursor, maaari mo lamang ilipat ang mouse sa pinakadulo ng screen at mag-click nang isang beses.

Hindi posible na gawin ang eksaktong parehong pagpapatupad tulad ng VKontakte, ngunit ang isang tinatayang bersyon ay madali.

Upang ipatupad ito, kailangan mo lamang ilagay ang script sa site.

Upang i-load ang script, maaari mong ilagay ang code mismo sa pagitan ng mga tag o bago ang pansarang tag sa footer.php file. O maaari kang mag-upload lang ng file na may script sa iyong hosting, at pagkatapos ay i-upload lang ang file sa site.

Kung gusto mong ilagay ang script at hindi mo kailangang mag-alala tungkol sa pag-load nito, pagkatapos ay ibibigay ko sa iyo ang script code mismo.

JavaScript

$(dokumento).ready(function() ($("body").append("^ Back to Top"); $ (window).scroll (function () ( kung ($ (ito).scrollTop () > 300) ( $ (".button-up").fadeIn(); ) else ( $ (".button-up").fadeOut(); ) )); $(".button-up").click( function( )( $("body,html").animate(( scrollTop: 0 ), 100); return false; )); $(".button-up").hover(function() ($(this) .animate (( "opacity":"1", )).css(("background-color":"#E1E7ED","color":"#45688E")), function())( $(this). animate (( "opacity":"0.7" )).css(("background":"none","color":"#45688E"); ));

Sa code na ito, maaari mong baguhin ang ilang mga parameter upang umangkop sa iyong mga pangangailangan.

• Ang Linya 4 ay responsable para sa pagpapakita ng mismong lugar ng pag-scroll ng pahina. Naglalaman ito ng mga pangunahing istilo para sa pagpapakita ng pindutan. sa prinsipyo, ang mga parameter na ito ay dapat na angkop sa halos lahat. Ngunit maaaring kailanganin mong i-edit ang mga ito upang umangkop sa iyong sarili;
• Sa linya 7 sa mga bracket mayroong isang numero 300, na responsable para sa sandaling lumitaw ang pindutan. Ibig sabihin, lalabas lang ang button pagkatapos mag-scroll ng 300 pixels pababa. Inirerekomenda ko ang pagpili ng isang halaga dito upang ang pag-scroll ay posible lamang kapag ang pangunahing menu ng site o ilang iba pang mahahalagang elemento sa nabigasyon ay nawala sa view;
• Sa linya 17, ang halagang 100 ay ang bilis ng pag-scroll. Kung mas mababa ang halaga, mas mabilis ang pagbabalik sa tuktok ng pahina.

Maaaring ilagay ang code na ito sa pagitan ng mga tag sa tuktok ng site. Kung ang site ay nasa WordPress, ang lugar na ito ay matatagpuan sa header.php template file. Maaari mo ring ilagay ito bago ang pansarang tag sa pinakailalim ng site (footer.php file). Inirerekomenda ko ang huling opsyon, dahil ito ay magpapabilis sa paglo-load ng site. Magiging ganito.

Ang isang mas mahusay na opsyon ay i-load ang script na ito mula sa isang hiwalay na file. Maaari mong i-download ang file gamit ang pindutan sa ibaba. Ito ay matatagpuan sa loob ng archive.

Pagkatapos ay i-upload ang file na ito sa iyong pagho-host. Maaari mo itong i-upload sa folder ng tema, o sa ugat ng site. Ako, ayon sa tradisyon, ginagawa ko ito sa folder ng template. Pagkatapos ay dapat mong isulat ang code na maglo-load ng file na ito sa parehong lugar. Upang gawin ito, gamitin ang sumusunod na linya.

JavaScript

Sa loob nito kakailanganin mong palitan ang buong landas sa file ng sa iyo sa pangalawang linya. Pagkatapos ay i-paste ang code na ito sa parehong lugar bago ang pansarang tag tulad ng ipinapakita sa ibaba.

Pagkatapos i-edit ang file, kung ginawa namin ito sa isang computer, ia-upload namin ito sa hosting at papalitan ang orihinal na file. Pagkatapos nito, gagana ang isang simpleng up button sa iyong site.

Upang i-edit ang mga parameter sa file na ito, kakailanganin mong buksan ito gamit ang Notepad editor.

Ang pagpipiliang ito ay napakahusay dahil sa pagiging simple nito, kapwa sa operasyon at sa pag-install sa site. Ang isang mas advanced na opsyon ay kapag, bilang karagdagan sa pag-scroll pataas, mayroon kang pagkakataong bumalik sa lugar kung saan ka nag-scroll. Ito ang eksaktong opsyon na ipinatupad sa social media. network ng VKontakte. Paano ito gawin, tingnan sa ibaba.

Nag-record ako ng detalyadong video tutorial gamit ang paraang ito.

Ang pagpipiliang ito ay nasa aking blog na ngayon. Hindi ko pa nasusuri ang pagiging kapaki-pakinabang nito. Ngunit, kung ito ay nasa isa sa mga higante ng Runet, maaari nating ligtas na ipagpalagay na ito ay may ilang gamit. Siyempre, sa ganoong sukat ito ay walang utak. Ngunit sa isang maliit na mapagkukunan, maaari kang mag-isip nang mabuti bago i-install ito. Ngunit tinitingnan ko ang hinaharap, kaya't ginawa ko ang desisyong ito.

Ang pagpapatupad ng pangalawang paraan ay medyo mas kumplikado, ngunit ang proseso ay dapat na pamilyar sa iyo kung nakagawa ka ng iba pang mga teknikal na isyu sa iyong mapagkukunan.

Binubuo ng 3 yugto:

Una, kailangan nating maglagay ng script na gagawing makinis ang pag-scroll at maayos ang pagbabago ng kulay kapag nag-hover, parehong ang lugar mismo at ang kulay ng kuwago na "Patungo sa Itaas", depende sa distansya ng pag-scroll pababa ng pahina.

Maaari kang pumunta sa 2 paraan, tulad ng sa unang kaso. Alinman sa ilagay ang script mismo sa nais na lugar (tingnan ang punto sa itaas) o i-download ang script sa pamamagitan ng isang file. Susunod, gagawin namin ang lahat sa pamamagitan ng pangalawang paraan upang ito ay mabisa.

I-download ang script file gamit ang button sa ibaba.

Ilagay ang file sa hosting at i-upload ang file sa pamamagitan ng code sa pinakailalim ng site, tulad ng ginawa mo noon. Ang file ay pinangalanang eksaktong kapareho ng sa paraan 1, kaya maaari mong kunin ang parehong linya ng code para sa output.

⇓ Bumalik ⇑ Pataas

Maaari mo itong ilagay sa pinakailalim ng site, bago ang closing tag sa footer.php file.

Pagkatapos ay isusulat namin ang mga istilo ng disenyo sa aming style file (style.css) at i-upload ang lahat ng binagong file sa hosting. Narito ang mga estilo mismo.

/* paglalarawan ng container */ .leftbar-wrap ( position: fixed; height: 100%; top: 0; width: 99px !important; left: 0; ) /* description of the “Top” button */ .left -controlbar ( height : 100%; display: block; text-decoration: none; ) /* paglalarawan ng “Back” button */ #scroll-back ( display: block; height: 100%; top: 0; display: wala; text-align: center ) /* paglalarawan ng column ng kulay ng background para sa parehong mga button */ .active-area ( width: 100px; height: 100%; display: block; text-align: center; ) /* set ang transparency ng kulay ng background kapag nag-hover sa mga active area page */ .leftbar-wrap:hover .active-area ( background: #E1E7ED !important; opacity:0.7 !important; ) /* gawing mas maliwanag ang highlight kapag nagho-hover sa ibabaw ng inskripsiyon */ .leftbar-wrap .active-area:hover ( ) /* center the button label */ .bar-desc-niz (top: 26% !important; position: relative; display: inline-block; ) .bar-desc-top ( itaas: 10% !important; posisyon : relative; display: inline-block;

Depende sa disenyo at istraktura ng iyong mapagkukunan, kakailanganin mong bahagyang baguhin ang ilang mga parameter sa mga istilong ito. Halimbawa, sa mga linya 47 at 53, baguhin ang parameter ng indentation para sa mga salitang "Bumalik" at "Itaas" mula sa pinakatuktok ng page, ayon sa pagkakabanggit.

Pagkatapos i-edit ang lahat ng mga file, maaari naming ligtas na mai-upload ang mga ito sa hosting at gagana ang paraang ito. Maaari mong makita ang pagpapatupad nito sa aking blog. Gawin ito para sa iyong kalusugan.

Lumipat kami sa susunod na pamamaraan. Ang pagpipiliang ito ay naglalaman na ng isang simpleng pindutan sa kanang ibabang bahagi ng screen, ang pag-click sa kung saan ay lilipat sa tuktok ng pahina.

Ang pagpapatupad ng button ay napaka-simple at gumagana ng 100% sa isang WordPress site. Wala akong masasabi tungkol sa HTML site o ibang engine. Subukan ito.

Kailangan mong kopyahin ang sumusunod na code kasama ang script sa pinakailalim ng site bago ang closing tag /

JavaScript

Up button para sa site - higit sa 7 napatunayang solusyon - 4.6 sa 5 batay sa 72 boto

Malaki ang papel na ginagampanan ng button na "Bumalik sa Itaas" sa pagpapabuti ng karanasan ng user, lalo na sa mga page na iyon na puno ng nilalaman. At dahil sa ngayon ang nilalaman para sa isang site ay ang pinakamahalagang bagay, mayroong, bilang isang panuntunan, higit pa at higit pa nito sa mga pahina, at ang pinakamahusay na paraan upang i-redirect ang bisita sa tuktok ng pahina ay iba't ibang mga espesyal na pindutan; titingnan kung paano gumawa ng button sa itaas para sa iyong site sa artikulong ito.

Kapag ang isang pahina ng site ay naglalaman ng isang malaking halaga ng nilalaman, ang gumagamit, na nabasa ito at nag-scroll sa pahina sa isang tiyak na punto o sa pinakaibaba, ay madalas na nagsisimulang mag-scroll sa itaas upang makita ang mga link sa nabigasyon na matatagpuan sa tuktok ng pahina. at/o magsagawa ng ilang aksyon.

Upang magdagdag ng kaginhawahan sa mga gumagamit at sa pangkalahatan ay mapabuti ang kakayahang magamit ng iyong site, pinakamahusay na gumamit ng isang pindutan para sa site, sa pamamagitan ng pag-click kung saan ang user ay awtomatikong na-redirect sa tuktok ng pahina.

Mayroong isang napaka-simpleng paraan upang mabigyan ang gumagamit ng ganoong pag-andar. Ang pamamaraang ito ay hindi nangangailangan ng paggamit ng anumang mga aklatan o karagdagang mga script at ginagawa ito ng eksklusibo gamit ang HTML at, kung nais, gamit ang CSS, sa pamamagitan ng paglikha ng isang ordinaryong panloob na link.

Upang gawin ito saanman sa ibaba ng iyong pahina, idagdag lamang ang sumusunod na code:

^Nangungunang

Halimbawa ng CSS code:

Topbutton ( width:100px; border:2px solid #ccc; background:#f7f7f7; text-align:center; padding:10px; position:fixed; bottom:50px; right:50px; cursor:pointer; color:#333; font -family:verdana; laki ng font:12px; -moz-border-radius: 5px;

Mga kapintasan:

Ang mga button na ginawa gamit ang JavaScript ay maaaring lumulutang at agad na lumitaw sa sandaling ang user ay lumipat ng kaunti pababa sa pahina, ngunit sa halimbawa sa itaas ay patuloy itong ipapakita.

Hindi magiging maayos ang pag-scroll at pagkatapos i-click ang user ay agad na mai-redirect sa tuktok ng pahina.

Ang mga bentahe ng ganitong uri ng pindutan:

Upang patakbuhin ang button, hindi mo kailangang gumamit ng mga script o malalaking aklatan. At ito ay isang napakalaking plus.

Ang pindutan ay ipinatupad nang simple. Para sa operasyon nito kakailanganin mo ang jQuery library, isang maliit na script na naglalaman ng mga kaganapan sa jQuery, ilang mga estilo at isang DIV tag na naglalaman ng mismong teksto at ang kinakailangang ID.

Gumagana ang button sa mga browser simula sa mga bersyon ng Firefox 3.0.10 - 3.6.13, Internet Explorer 7 at 8, Google Chrome, Jquery 1.4.3. Sa kasamaang palad ang pindutan ay hindi gumagana sa IE 6, ngunit kailangan mo ba ito :)?

JQuery JavaScript code:

Kailangan mong ilagay ang code sa ibaba bago ang tag sa lahat ng page ng iyong site. Kung nakakonekta na ang jQuery library sa iyong site, hindi mo na kailangang idagdag ang unang linya.

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

Upang bigyan ang pindutan ng magandang hitsura, kailangan mong idagdag ang mga sumusunod na estilo. Pinakamabuting idagdag ang mga ito sa stylesheet ng iyong site.

#toTop ( width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* button indent mula sa ibabang gilid ng page*/ right:10px ; cursor:pointer;

Upang tawagan ang button, idagdag ang sumusunod na HTML code bago ang tag.

^ Nangunguna

Isang simpleng plugin na nagpapalabas ng isang button nang maayos at maayos na nag-scroll pataas kapag nag-click ka dito. Upang magamit ang plugin sa iyong site, hindi mo kailangang magdagdag ng anumang mga tag sa HTML markup ng page. Ikonekta lamang ang lahat ng kinakailangang mga file ng plugin at gagana ito.

Mga pinagmumulan

Ang ipinakita na archive ay naglalaman ng 3 folder: css - button style file, img - image at js folder na naglalaman ng 4 na JavaScript file.

Pagkonekta ng mga JavaScript file:

I-unpack ang na-download na archive na may mga source sa anumang folder sa iyong site. Para magamit ang plugin, kailangan lang naming ikonekta ang tatlo sa mga available na js file. Upang isama ang mga ito, idagdag ang mga sumusunod na path ng file bago ang pansarang tag:

$(document).ready(function() ( /* var defaults = ( containerID: "toTop", // fading element id containerHoverID: "toTopHover", // fading element hover id scrollSpeed: 1200, easingType: "linear" ) ; */ $().UItoTop(( easingType: "easeOutQuart" ));

Iwasto ang mga landas na humahantong sa mga file alinsunod sa direktoryo kung saan matatagpuan ang mga file ng plugin.

Pakitandaan na kung dati mong ikinonekta ang jQuery library sa iyong site, hindi mo na kailangang idagdag ang sumusunod na code:

Pagdaragdag ng CSS:

Ang susunod na hakbang ay magdagdag ng mga istilo ng CSS, kung wala ang mga ito ay hindi gagana ang pindutan. Mayroong dalawang paraan upang ikonekta ang mga ito.

Ang unang paraan ay ang magdagdag ng link sa CSS style file sa pagitan ng mga tag sa lahat ng page ng iyong site:

Tandaan lamang na baguhin ang landas ng file.

Ang pangalawang paraan ay ang kopyahin ang buong nilalaman ng ui.totop.css file at i-paste ito sa CSS stylesheet file ng iyong site. Ang pangalawang paraan ay magiging mas makatwiran dahil hindi ito nangangailangan ng pagkonekta ng mga hindi kinakailangang file.

Binibigyang-daan ka ng solusyong ito na ilipat ang parehong pababa at itaas ng pahina dahil binubuo ito ng dalawang mga pindutan. Ang mga pindutan ay nakapirming matatagpuan sa kaliwang bahagi ng pahina. Kapag nag-scroll, ang mga pindutan ay kumikislap nang maayos. Makikita mo ang epektong ito sa pamamagitan ng pagtingin sa demo.

Mga pinagmumulan

Ang na-download na archive ay maglalaman ng lahat ng mga file na kinakailangan para gumana ang button. Ang mga ito ay CSS, JS file at arrow image file.

Ikonekta ang HTML:

Una kailangan mong ilagay ang HTML code para sa pagtawag sa mga pindutan sa lahat ng mga pahina ng site. Upang gawin ito, ilagay kaagad ang teksto sa ibaba bago ang tag.

Koneksyon ng JavaScript:

Kaagad pagkatapos ng HTML code, bago ang tag, ilagay ang code para sa pagtawag sa mga kinakailangang JavaScript file at JQuery code.

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

Ang mga landas na humahantong sa mga JS file ay dapat mapalitan ng iyong sarili.

Kasama sa unang linya ng code ang JQuery library, kaya kung naikonekta mo na ito sa iyong site dati, kailangan mo itong alisin.

Susunod ay ang koneksyon ng isa pang JS file at code na naglalaman ng ilang mga function na kailangang isaalang-alang nang mas detalyado. Dahil sa kanilang tulong maaari mong baguhin ang ilang mga parameter ng mga pindutan. Nasa ibaba ang code na may mga paliwanag:

// ang nilalaman ay ang identifier ng div sa loob kung saan ang lahat ng nilalaman na dapat i-scroll ay dapat na kasinungalingan, kung ang lahat ng nilalaman ng mga pahina ng iyong site ay nasa ibang id, maaari mo itong ipasok dito, dahil kung wala ito ang mga pindutan ay hindi gumagana $(function( ) ( var $elem = $("#content"); // gamit ang susunod na dalawang linya, ang mga button ay ipinapakita $("#nav_up").fadeIn("slow"); $(" #nav_down").fadeIn(" slow"); // kapag nag-scroll, ang mga button ay may fading effect, ito ay ipinapatupad sa pamamagitan ng pagbabago ng kanilang transparency, kaya sa pamamagitan ng pagbabago ng indicator na 0.2 sa range mula 0.1 hanggang 1, maaari mong ayusin ang kanilang transparency $(window).bind("scrollstart", function ()( $("#nav_up,#nav_down").stop().animate(("opacity": "0.2")); )); maaari mong ayusin ang parehong transparency, ngunit sa sandaling ang mga pindutan ay pinindot ay ipinapakita lamang sa pahina, ang default na halaga ay 1 $(window).bind("scrollstop", function())( $("#nav_up, #nav_down").stop().animate(("opacity":"1")); )); // sa pamamagitan ng pagpapalit ng numerong 800 maaari mong taasan o bawasan ang bilis ng pag-scroll ng pahina $("#nav_down"). click(function (e) ($("html, body").animate((scrollTop: $elem .height()), 800);

)); // pareho sa itaas ngunit para sa pag-scroll pababa $("#nav_up").click(function (e) ( $("html, body").animate((scrollTop: "0px"), 800); ) );

));

Koneksyon ng CSS:

Ang isa pang pagpipilian para sa pag-aayos ng maayos na pag-scroll ng nilalaman ng pahina, mula sa ibaba hanggang sa itaas, gamit ang JQuery. Ang pindutan ay matatagpuan sa kanang ibaba ng pahina at lilitaw lamang kung mag-scroll ka pababa ng pahina nang kaunti. Ang lahat ay ipinatupad gamit ang isang maliit na piraso ng CSS at JS code, pati na rin ang isang maliit na imahe na ginamit bilang isang pindutan.

Gusto ko ang button na ito dahil ang paglikha nito ay hindi nangangailangan ng malaking bilang ng mga script at ito ay may magagandang epekto.

Ngayon, alamin natin kung ano ang kailangang gawin para ikonekta ang button sa site

Larawan:

Kakailanganin mo ng larawan ng mismong button, maaari kang kumuha ng anuman, o maaari mong gamitin ito:

Upang tumawag ng isang button pagkatapos ng nilalaman ng pangunahing pahina o bago ang isang tag, ilagay ang sumusunod na HTML code:

Nangunguna

Scrollup( width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url("icon_top.png") hindi na mauulit ;)

Gamit ang code na ito, bilang karagdagan sa hitsura, tinutukoy namin ang posisyon ng button at itinakda ang padding sa 100 px mula sa kanan at 50 px mula sa ibaba. Pinakamainam na idagdag ito sa stylesheet ng iyong site.

Una, ikinonekta namin ang library kung hindi pa ito nakakonekta para sa iyong site. Para sa layuning ito sa pagitan ng mga tag...? ipasok ang sumusunod:

Pagkatapos, kaagad pagkatapos isama ang library, kailangan mong ilagay ang sumusunod na JQuery code:

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

Ang unang ScrollTop - tinutukoy ang kasalukuyang vertical na posisyon ng scroll bar at kung ito ay naging higit sa 100 px, awtomatikong lilitaw ang button. Kung gusto mo itong lumitaw nang mas maaga o mas bago, baguhin ang halagang ito kung kinakailangan.

Tulad ng nakikita mo, may dalawa pang parameter - 0 - na nangangahulugang mag-i-scroll ang page hanggang sa simula hanggang sa zero pixel, at 600 - ito ang bilis ng animation sa millisecond.

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

Kapag nag-scroll ka sa pahina ng isang tiyak na bilang ng mga character pababa, isang malaking button na may arrow ang lalabas sa kaliwang ibaba. Kapag nag-hover ka sa cursor, maayos na umiilaw ang button, at kapag nag-click ka, maayos itong nag-i-scroll pataas.

Isang arrow na imahe, CSS style at JQuery ang ginagamit para likhain ang button.

Larawan:

HTML code:

Upang tawagan ang button, gamitin ang sumusunod na HTML code:

Bumalik sa Itaas

Ngunit kailangan mong ilagay ito kaagad bago ang pangunahing nilalaman ng pahina kung ilalagay mo ito bago ang pagsasara ng tag, ang pindutan ay hindi gagana.

At isa pang mahalagang punto tungkol sa HTML code. Dapat mong italaga ang identifier sa itaas sa tag.

Kung ang tag ay naitalaga na ng isang partikular na id, pagkatapos ay sa button na calling code na nasa itaas lamang, ang #top ay dapat mapalitan ng #your-id

Ang padding at hitsura ng button ay itinakda gamit ang CSS ang isang transition property ay idinagdag upang lumikha ng epekto ng pagkaantala kapag ini-hover ang cursor. Mas mainam na ipasok ito sa CSS file ng iyong site.

#back-top ( position: fixed; bottom: 30px; margin-left: -150px; ) #back-top a ( width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica , sans-serif; text-decoration: none; /* transition */ -moz-transition: 1s; : 108px; taas: 108px; display: block; margin-ibaba: 7px; moz-border-radius: 15px; /* transition */ -webkit- transition: 1s;

$(dokumento).ready(function())( // itago muna ang #back-top $("#back-top").hide(); // fade in #back-top $(function () ($( window ).scroll(function () ( kung ($(this).scrollTop() > 100) ($("#back-top").fadeIn(); ) else ($("#back-top"). fadeOut (); ) )); // scroll body sa 0px sa pag-click $("#back-top a").click(function () ($("body,html").animate(( scrollTop: 0 ), 800 );

Ang unang linya ay kumokonekta sa JQuery library, kung nakakonekta ka na nito, huwag idagdag ang linyang ito. Idagdag ang natitirang code sa pagitan ng mga tag...

Kung kinakailangan, maaari mong baguhin ang mga sumusunod na parameter:

• Ang 100 ay ang bilang ng mga pixel pagkatapos kung saan lilitaw ang pindutan pagkatapos mag-scroll;
• 0 - nangangahulugan ito na ang pag-scroll ay gagawin sa zero pixel, ibig sabihin, hanggang sa pinakatuktok.
• Ang 800 ay ang bilis ng pag-scroll sa millisecond.

Lumilitaw ang isang malaking translucent up na button kapag nag-scroll sa gitna ng page. Mahirap na hindi siya mapansin. Ginawa lamang gamit ang JQuery at CSS.

Unawain natin ang HTML:

Para gumana ang button, ang nilalaman ng pangunahing page na kailangang mag-scroll ay dapat ilagay sa pagitan ng dalawang tag:

Walang espesyal dito, i-paste lang ang code na ito sa CSS style file ng iyong site.

#message a ( /* display: block bago itago */ display: block; display: none; /* link ay higit sa lahat ng iba pang elemento */ z-index: 999; /* link ay hindi nagtatago ng text sa likod nito */ opacity : */ /* link ay nasa gitna */ kaliwa: 50%; margin-left: -160px /* = kalahati ng lapad */ /* ikot ang mga sulok (sa iyong kagustuhan) */ -moz-border-radius: 24px ; -webkit-border-radius: 24px;

$(function () ( /* magtakda ng mga variable nang lokal para sa mas mataas na pagganap */ var scroll_timer; var displayed = false; var $message = $("#message a"); var $window = $(window); var top = $ (document.body).children(0).position().top; /* react to scroll event on window */ $window.scroll(function () ( window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () ( if($window.scrollTop()