, tilbage til det hul tjener som en yderst forbrugervenlig indfaldsvinkel til web - udvikling, især hvis man bygger et websted med en masse indhold.det er ikke anderledes i wordpress, den mest populære content management system), der anvendes af millioner af mennesker og virksomheder.en præmie temaer til rådighed i wordpress kommer med tilbage til toppen, der fremkommer, når du rulle ned på en side.det er dog ikke alle temaer, kom med denne funktion, især dem, der er gratis.den gode nyhed er, at vi kan skabe vores egen tilbage til toppen let, ved hjælp af enkle, html, css og jquery, en populær javascript bibliotek.ved at tilføje den knap, du kan forbedre din hjemmeside ' s anvendelighed og grænseflader, som igen kan forbedre søgemaskine optimering.at se et eksempel, bare gå ned på denne side.skabe: det første skridt for at skabe sådan en knap i jquery først skabe html.koden til at gøre dette, er ganske enkelt:,,), ved hjælp af html ' a ' plader, vi forbinder dette skilt til noget, da vi vil præcisere, at det at gå til toppen af side senere, når vi skaber vores javascript kode.vi er også at tildele en klasse af "scrolltotop", så vi kan målrette det i vores css til stil det pænt.den tekst, der skal anføres på den knap er blot en pil (^), der fungerer som et symbol, således at deres bruger ved at trykke på knappen automatisk vil rulle op til toppen af side.nu, hvor vi har html kode, vores næste skridt er at gå til wordpress instrumentbræt.til venstre menu, gå til udseende - > redaktør, som vil tage dig til redigering skærm til temaet ' s folkesundhedsprogrammet og ccs.her afbillede (klik for fuld mening), når du er på skærmen, vil du se nærmere på modeller.gå ned og du vil se jeres side modeller.vi vil gennemføre vores knap på siden - modeller, der har masser af overfyldte indhold og vil drage fordel af den tilbage til toppen.for resten, vi skal bruge vores vigtigste side skabelon.temaet er denne ret forskelligt, så sørg for at se, hvilken skabelon anvendes for de fleste af dine sider.klik på deres vigtigste side model og pasta de http: //kode for vores skilt efter wp funktion, the_content(),.det er, hvad det ligner: (fremhævet det område, hvor html kode er placeret.dette er, hvordan det ser ud for bladet lite tema), satte vores knap, vi nu har i gjort det ', tid til at gå over til css.når du først klik på udseende - > redaktør, du straks vil blive rettet mod din stylesheet fil (stil. css).for at skabe en brugervenlig tilbage til toppen i wordpress, er vi nødt til at sørge for, at vi tilføjer, styles, således at det falder i med udformningen af vores hjemmeside.her er css - kode:,,. scrolltotop {, bredde: 35px;,, højde: 35px;,, tekst, tilpasse: center;,, baggrund: rgba (53,53,53,0.4).vigtige;,, grænse radius: 100px;,, skrifttype vægt: dristige; skriftstørrelsen: 30px;,, tekst): ingen;,, holdning: faste,,, top. 575px,,, ikke: 40px;,, display: ingen;,, z-index: 5.vigtigt.}. scrolltotop: den {, baggrund: rgba (53,53,53,0.2).vigtige;,, tekst): ingen;,,, vi går efter "scrolltotop" klasse defineret for vores knap, og vi giver det nogle særlige styles.bredde og højde giver det en perfekt kvadratisk form, men grænsen radius ejendom på 100px gør. en perfekt cirkel form.vi ønsker også baggrunden for en mørk grå farve, men gennemsigtige, således at det stemmer fint med side.vi bruger rgba ejendom, til at gøre dette, og' rgb ' det røde, grønne, blå værdier i vores mørke grå farve (i dette tilfælde: 53,53,53) og ' a ' der, hvor gennemsigtigt, vi ønsker, den skal være, stk. 1, der ikke er gennemsigtighed, og 0 at være fuld gennemsigtighed).i vores tilfælde, vi anvender 0, som er markant gennemsigtig.vi er så giver det en fast holdning til nederst på siden, så det er ' ikke griber ind i de vigtigste indhold.oprindeligt var det knap ' s - er der ingen, og ved hjælp af jquery, vil vi sørge for, at de udviser, når de bruger ruller ned til den side.når brugeren svæver over vores knap, så gennemsigtighed vil blive lidt mere for at give det en lighter baggrund.gå videre og pasta - koden i din style.css fil.,, at knap funktioner i jquery, nu dit skilt er tiltrækkende, men hvis du tjekker side på deres område, kan man se, det er der ikke.det er, fordi vi har defineret en første ejendom "display: ingen;" betyder det, at de knap kan ' t anføres på alle.vi vil ændre det nu ved hjælp af jquery.først skal vi åbne vores fod model på den rigtige aftale inden for vores udseende - > redaktør vindue.her er hvor fod på din hjemmeside er genereret på hver side.her er vi nødt til at fastlægge, at vi bruger den gældende version af den jquery bibliotek af slaget følgende kode inden udløbet af organ () tag:, med dette er defineret nu, vi er klar til at skrive, som vil gøre vores wordpress tilbage til øverste skærm, når brugeren ruller ned.i din fod skabelon lige under, hvor du limet ovennævnte kode, åbne et nyt manuskript, som denne:,, nu inden for disse mærkater, pasta i følgende kode:,, $(dokument). - (function() (//se, hvis vinduet er i øjeblikket på toppen.hvis ikke, så har vores knap $(vindue). skriftrulle (function() {, hvis ($(dette). scrolltop() > 100) {, $('. scrolltotop '). fadein();,, andet (, $('. scrolltotop '). fadeout(),,,,,,,,, //rulle tilbage til toppen, hvis brugeren klik på knap $('. scrolltotop '). klik (function() {, $(': organ; '). manipulerer ((scrolltop: 0}, 800), tilbage, falske,,),}), ved hjælp af jquery, scrolltop(), funktion, kan vi se, om brugeren har scrolled ned endnu.hvis de har vores knap forsvinder, i deres vindue, og hvis de rulle op til toppen, det forsvinder, og forsvinde.hvis de klikker på det, vi bruger, animate(), funktion at rulle brugeren tilbage til toppen af side inden for 800 millisekunder, defineret i vores kodeks.det giver brugeren en god informationskampagne, uden at det tager for lang tid.,, at teste vores knap, hvis du opfriske den side på deres område, skal anføres, når scroller ned, svarende til, hvordan det ser ud i demo, jeg gav i begyndelsen af tutor.og værsgo, et fuldt funktionsdygtigt, tilbage til toppen i wordpress skik, som dig.det er en god måde at gøre din ikke - præmie tema ser godt ud med en brugervenlig grænseflade.nu vil du ' ikke behøver at bekymre sig om deres brugere fra deres side, fordi du har for meget indhold på din side.,, bonus: lydhøre over wordpress tema, når du ser på deres område på et skrivebord, du kan se, at de knap ser fint ud.problemet er imidlertid, at brugerne på en smartphone eller phablet anordning ikke vil være i stand til at se det.det ' s ikke, at kodeksen er ' t arbejde snarere den knap er uden for skærmen ' synspunkt.da mange internetbrugere kigger på mobile anordninger, er det yderst vigtigt at sikre, at deres lokalitet er brugervenlige på alle skærmstørrelse.dette er kendt som deres design, og det bør være det korte af et websted og' udvikling.for at gøre det anføres i betragtning af mobilt udstyr, vi bruger css medier forespørgsler, som vi kan bruge til at tilføje styles visse skærmstørrelse.de vigtigste skærmstørrelser vi vil ramme er for de fleste smartphones og phablets i portræt orientering, men vi har brug for et særskilt spørgsmål til iphone 5 og under skærme, da de er en smule mindre.åben dit stylesheet i din redaktør og pasta følgende kode helt nede i bunden af sagen: /* * * * * tilbage til øverste knap medier forespørgsler * * * * * /@ medier skærm og min bredde: 330px) og (max bredde: 470px) {* mest smartphones og phablets i portræt * /. scrolltotop {, holdning: faste,,, top. 480px,,, ikke: 40px;,,, @ medier skærm og max bredde: 320px) {* mindre skærme i portræt * /. scrolltotop {, holdning: faste,,, top. 450px,,, ikke: 40px,,,,,,, hvad vi gør her, er at ændre den øverste position af vores knap på forskellige skærmstørrelse.på de fleste smartphones og tabletter, vil det vise sig, 480px fra toppen, snarere end 575px, som vi har defineret i vores vigtigste styles.dette vil gøre det synligt på skærmene mellem 330 og 470px bredt.anordninger, som de iphone 3-5s og samsung galakse s-s2 har mindre skærme end de mere avancerede modparter i 320px, og hvis vi brugte det samme spørgsmål, vil det ikke være helt, hvis vi ønsker det.det er grunden til, at vi har et særskilt spørgsmål, hvor det skilt kun er placeret 450px fra toppen, 30px længere end de større skærme.nu er din knap er lydhøre over for og vil være det rigtige sted på alle skærmstørrelse.som du har bemærket, har vi ikke gjort media forespørgsler til tabletter.det er, fordi højden af de fleste tabletter svarer til de fleste desktopcomputere skærme, så knap optræder på samme sted som specificeret i vores vigtigste styles (575px).,,,,, hvis du har spørgsmål eller kommentarer, du er fri til at gå, en bemærkning nedenfor, og vi vil komme tilbage til dig med det samme.- kodning.,