Html css js-knappspinn. Lag en "Tilbake til toppen"- eller Scroll to Top-knapp ved å bruke jQuery
"Tilbake til toppen" eller " "-knappen er et populært og nyttig element på sidene til moderne nettsteder, spesielt i tilfeller der disse sidene inneholder mye innhold.
For det første forbedrer disse generelt brukervennligheten til nettstedet. Når en bruker har lest en stor mengde innhold og ruller til bunnen av siden for å gå tilbake til toppen av siden, bruker han standard rulling. For å sikre at brukeren blir omdirigert til toppen av siden automatisk, bruker nettstedsutviklere og administratorer som tenker på de besøkende, ulike varianter av «Gå tilbake til toppen»-knappene. Dette kan være de enkleste løsningene uten å bruke noen ekstra biblioteker eller skript, samt med utvidet funksjonalitet, koble et bibliotek og et lite utførelsesskript.
"Tilbake til toppen"-knappene er utformet på forskjellige måter; disse kan være banale tekstlenker, klassiske knapper, runde knapper med en pil, eller de kan bruke et bilde av passende type. Oftest ser disse knappene statiske ut; noen ganger endrer de bakgrunnsfargen og fonten når de svever; sjeldnere bruker utviklere animasjonseffekter.
I dag, ved hjelp av et enkelt eksempel, skal vi se på hvordan du kan bruke CSS-animasjon for å legge til en liten bevegelse til «Tilbake til toppen»-popup-knappen, og samtidig skal vi se på selve skriptet som inneholder jQuery-hendelsene som er nødvendige for at knappen skal fungere.
For å aktivere en knapp på nettstedet ditt, er det ikke nødvendig å legge til noen tagger i HTML-koden til siden. Det er nok å koble til jQuery-biblioteket og skrive en liten kjørbar js, og knappen vil fungere. Vi vil lage utseendet og animasjonen ved å bruke CSS ved å koble style.css-filen til html-dokumentet.
Så hvis nettstedet ditt ennå ikke har jQuery-biblioteket tilkoblet, kan dette enkelt gjøres ved å koble den gjeldende versjonen direkte fra Googles innholdsleveringsnettverk (CDN). For å gjøre dette, skriv bare følgende linje før den avsluttende taggen:
| < script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" > |
Nedenfor, rett under denne linjen, plasser en liten kjørbar js, som vil vise knappen vår med en viss forsinkelse, og også utføre hovedfunksjonen, og jevnt returnere brukeren til toppen av siden.
| < script>jQuery(dokument) . ready(function ($) ( var //rullehastighet til toppen av siden hastighet = 500 , //html-knappoppsett $scrollTop = $(" " ) . appendTo("body" ); $scrollTop . click(function (e) ( e. preventDefault() ; $( "html:not(:animated),body:not(:animated)" ). animate(( scrollTop: 0 ) , speed ) ; ) ) ; //innstilling av utseendemodus for knappfunksjonen show_scrollTop() ( ( $(window). scrollTop() > 300 ) ? $scrollTop . fadeIn(600 ): $scrollTop . fadeOut (600 ) ; ) $(vindu) .scroll( funksjon () ( show_scrollTop() ; ) ); show_scrollTop() ; ) ); |
jQuery(document).ready(function($)( var //rullehastighet til toppen av siden hastighet = 500, //html knappeoppsett $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( scrollTop: 0), hastighet); )); //innstilling av utseendemodus for knappefunksjonen show_scrollTop())( ($(window).scrollTop() > 300) ? $scrollTop.fadeIn(600) : $scrollTop. fadeOut(600); ) $(vindu).scroll(funksjon())( show_scrollTop(); )); show_scrollTop(); ));
Jeg la til noen kommentarer til manuset, så å si, for større forståelse. Som jeg skrev ovenfor, eliminerer denne metoden behovet for å legge til eventuelle tagger til HTML-sidemarkeringen; skriptet gjør dette perfekt. Når brukeren ruller nedover siden med 300px, vil plugin-en skrive en knapp-tag, i vårt tilfelle er dette:
| < a href= "#" title= "Gå raskt tilbake til toppen" class = "scrollTop" >< i class = "fa fa-angle-double-up" > |
i brødteksten på siden, alt på samme sted før den avsluttende taggen.
For jevnt å vises og skjule knappen bruker vi funksjonene .fadeIn () og .fadeOut () med en gitt hastighet på 600 millisekunder. Rullehastigheten til toppen av siden er satt til 500 millisekunder.
| < link href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel= "stylesheet" type= "text/css" > |
Etter å ha koblet til Font Awesome, kan du bruke dem i HTML-kode eller, som i vårt tilfelle i js, ved å bruke spesialklasser, en base fa og en klasse for en bestemt type ikon, i vårt tilfelle er det fa-angle-double-up . Du kan finne klassen til et bestemt ikon på nettstedet.
Utseendet til ikonbeholderen, bakgrunnsstørrelse og farge, plassering, skriftfarge og størrelse, alt dette bestemmes direkte i css, med fokus på selector.scrollTop i
| /* danner knappens kropp, posisjon og overgangseffekt */ .scrollTop ( /* skjult som standard */ display : none ; /* runde hjørner */ -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; border-radius : 100% ; /* fikser knappens posisjon */ posisjonen : fast ; /* knappens dimensjoner */ bredden : 60px ; høyden : 60px ; /* knappens posisjon * / høyre : 1rem ; bunn : 1rem ; /* markørvisning */ markør : peker ; /* overgangseffekt mellom to knappetilstander */ -webkit-overgang: nederst 0.2s kubikk-bezier (0.42 , 0 , 0.58 , 1 ) ; -moz-overgang: bunn 0,2 s kubikk-bezier (0,42 , 0 , 0,58 , 1 ); -ms-overgang: bunn 0,2 s kubikk-bezier (0,42 , 0 , 0,58 , 1 ); -o-overgang: bunn 0.2 s s cubic-bezier (0,42 , 0 , 0,58 , 1 ); overgang : bunn 0,2 s cubic-bezier (0,42 , 0 , 0,58 , 1 ) ) /* flytt knappen opp på hover */ .scrollTopp : 2 ) / * ekstra knappdesignelementer */ .scrollTop : før , .scrollTop : etter ( innhold : "" ; topp: 0; venstre: 0; bakgrunnsfarge : #766DCC ; bredde: 60px; høyde: 60px; -webkit-border-radius: 100% ; -moz-border-radius: 100% ; -ms-border-radius: 100% ; kantradius : 100 % ; -webkit-animasjon-fyll-modus: begge ; -moz-animasjon-fyll-modus: begge ; animasjon-fyll-modus: begge; posisjon: absolutt; opasitet: 0; ) /* definerer navn, type og hastighet på animasjonen llya:before */ .scrollTop : before ( bakgrunnsfarge : #736cad ; -webkit-animasjon: clickMe 1.8s 333ms uendelig ease-out; -moz-animation: clickMe 1.8s 333ms uendelig ease-out; animasjon : clickMe 1.8s 333ms uendelig ease-out ) /* definer navnet, typen og hastigheten på animasjonen llya:after */ .scrollTop : after ( -webkit-animation: clickMe 1.8ms 777s infinite ease-out; - moz-animasjon: clickMe 1.8s 777ms uendelig ease-out; animasjon: clickMe 1.8s 777ms uendelig ease-out ) /* danner utseendet til ikonet */ .scrollTop i (bredde: 30px ; høyde : 30px 30px ; display : block ; background : rgba (28, 144, 243, 0.61); color: #fff; text-align: center; line-height: 30px; font-size: 1.3rem; background-size: 12px; - webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; posisjon: absolutt; venstre: 15px; topp: 15px; z-indeks : 100 ) /* animasjon */ @-webkit-keyframes clickMe ( 0 % ( opasitet : 0 ; -webkit-transform: skala ( 0 ) ) 5 % ( opasitet : 1 ) 100 % ( opasitet : 0 ) ) @-moz-keyframes clickMe ( 0 % ( opasitet : 0 ; -moz-transform: skala ( 0 ) ) 5 % ( opasitet : 1 ) 100 % ( opasitet : 0 ) ) @keyframes clickMe ( 0 % ( opasitet : 0 ; -webkit-transform: skala (0 ); -moz-transform: skala (0 ) ; -ms-transform: skala (0 ) ; -o-transform: skala (0 ) ; transform : skala (0 ) ) 5% ( opasitet: 1) 100 % (opasitet: 0)) |
/* danner knappens kropp, posisjon og overgangseffekt */ .scrollTop ( /* skjult som standard */ display: ingen; /* runde hjørner */ -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; /* fikser knappposisjonen */posisjon: fast; /* knappedimensjoner */ bredde: 60px; høyde: 60px; /* knappposisjon * / høyre: 1rem; bunn: 1rem; /* markørvisning */ markør: peker; /* overgangseffekt mellom to knappetilstander */ -webkit-overgang: nederst 0.2s cubic-bezier(0.42, 0, 0.58, 1) ; -moz-overgang: bunn 0,2 s kubikk-bezier(0,42, 0, 0,58, 1); -ms-overgang: bunn 0,2 s kubikk-bezier(0,42, 0, 0,58, 1); -o-overgang: bunn 0,2 s cubic-bezier(0.42, 0, 0.58, 1); overgang: bunn 0.2s cubic-bezier(0.42, 0, 0.58, 1) ) /* flytt knappen opp på hover */ .scrollTop:hover ( nederst: 2rem ) / * ekstra knappdesignelementer */ .scrollTop:before, .scrollTop:after ( innhold: ""; topp: 0; venstre: 0; bakgrunnsfarge: #766DCC; bredde: 60px; høyde: 60px; -webkit-border-radius: 100%; -moz-border-radius: 100 %; -ms-border-radius: 100 %; kantradius: 100 %; -webkit-animasjon-fyll-modus: begge; -moz-animasjon-fyll-modus: begge; animasjon-fyll-modus: begge; posisjon: absolutt; opasitet: 0; ) /* definerer navn, type og hastighet på animasjonen llya:before */ .scrollTop:before ( bakgrunnsfarge: #736cad; -webkit-animation: clickMe 1.8s 333ms uendelig ease-out; -moz-animation: clickMe 1.8s 333ms uendelig ease-out; animasjon: clickMe 1.8s 333ms uendelig ease-out ) /* definer navnet, typen og hastigheten til animasjonen llya:after */ .scrollTop:after ( -webkit-animation: clickMe 1.8ms 7777 uendelig ease-out; - moz-animasjon: clickMe 1.8s 777ms uendelig ease-out; animasjon: clickMe 1.8s 777ms uendelig ease-out ) /* danner utseendet til ikonet */ .scrollTop i (bredde: 30px; høyde: 30px; display: block; background: rgba (28, 144, 243, 0.61); color: #fff; text-align: center; line-height: 30px; font-size: 1.3rem; background-size: 12px; - webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; border-radius: 100%; posisjon: absolutt; venstre: 15px; topp: 15px; z- indeks: 100 ) /* animasjon */ @-webkit-keyframes clickMe ( 0% ( opasitet: 0; -webkit-transform: scale(0) ) 5% ( opasitet: 1 ) 100% ( opasitet: 0 ) ) @- moz-keyframes clickMe ( 0% ( opasitet: 0; -moz-transform: skala(0) ) 5 % ( opasitet: 1 ) 100 % ( opasitet: 0 ) ) @keyframes clickMe ( 0 % ( opasitet: 0; -webkit-transform: skala(0); -moz-transform : skala(0); -ms-transform: skala(0); -o-transform: skala(0); transform: skala(0) ) 5 % ( opasitet: 1 ) 100 % ( opasitet: 0 ) )
Det gjenstår å vurdere selve animasjonen. Animasjonseffekten brukes ikke på hele knappen, men på de ekstra pseudo-elementene:etter og:før . For å lage en CSS-animasjon må du legge til en animasjonsegenskap til stilene til disse elementene, som lar deg definere et navn, justere akselerasjonen og varigheten av animasjonen, samt andre detaljer om hvordan animasjonen skal flyte. Utseendet til animasjonen konfigureres ved hjelp av @keyframes, et sett med nøkler som konfigurerer rammene til animasjonen.
I vårt eksempel er animasjonsnavnet: clickMe , varighet: 1,8 s , forsinkelse: 333ms for:before og 777ms for pseudoelementet:after . Vi bestemmer også antall repetisjoner av animasjonen - uendelig uendelig og typen animasjon ease-out - akselerasjon i begynnelsen.
Etter at vi har satt opp de midlertidige egenskapene til animasjonen, gjenstår det å bestemme utseendet til animasjonen, dette gjøres inne i @keyframes-blokken. Først blir navnet på animasjonen gitt, og deretter beskrives trinnene innenfor krøllete seler. Fra kodeeksemplet kan du se at rammer av opacitetsegenskapen (transparency) og transformasjon av transformasjonselementet med skalafunksjonen brukes - skalaen til elementet. Animasjonstrinn er spesifisert ved hjelp av prosenter.
Animasjon av CSS-egenskaper er beskrevet separat for nettlesere @-webkit-keyframes og Mozilla Firefox-nettleser @-moz-keyframes for å forhindre feilaktig visning av animasjon i disse nettleserne.
Det er alt. Nok en gang, se på et levende eksempel på hvordan "Tilbake til toppen"-knappen fungerer, og hvis du trenger det, last ned kildene pakket i et arkiv og lagt ut i skyen på Y.Disk.
Med all respekt, Andrew
På nettsteder med mye innhold (for eksempel blogger) trenger du bare å bruke "Tilbake til toppen"-knappen. Tross alt kan det hende at en bruker som har lest en lang artikkel må gå tilbake til toppen av siden for å fortsette å navigere på siden. Eller en besøkende, før han leser hele artikkelen, blar gjennom den fra begynnelse til slutt og skummer over overskrifter, bilder, diagrammer for å vurdere på forhånd om artikkelen er verdt å lese eller ikke. Vanligvis, i slike tilfeller, i fravær av en "Topp"-knapp, vil den besøkende ganske enkelt rulle opp siden med musehjulet eller ved å bruke rulle (i siden av nettleseren).
Derfor, for enkel navigering på nettstedet, brukes en siderullingsknapp. Du kan lage en slik knapp enten uten å bruke JavaScript (kun ved å bruke CSS) eller med den. La oss se på de enkleste implementeringene av disse metodene.
Knapp til toppen: HTML+CSSFordelen med denne metoden er brukervennlighet (ingen grunn til å bruke ekstra biblioteker eller skript).
Toppknapp med CSS - "Nubex" .topNubex (posisjon: fast; høyre: 45px; bunn: 45px; ) Topp
Ulempene med denne metoden er at i dette tilfellet kan ikke rulling være jevn, og den besøkende blir umiddelbart omdirigert til toppen av siden.
Knapp til toppen: JavaScriptMetoden nedenfor bruker JQuery-biblioteket. Den er enkel å bruke og lar deg rulle siden jevnt.
Toppknapp som bruker JavaScript - "Nubex" #topNubex ( posisjon: fast; høyre: 45px; nederst: 45px; ) $(function() ( $(window).scroll(function() ( if($(this) .scrollTop( ) != 0) ( $("#topNubex").fadeIn(); ) else ( $("#topNubex").fadeOut(); ) )); $("#topNubex").click( function() ( $("body,html").animate((scrollTop:0),700); )); )); 
Dette eksemplet bruker et bilde som knappebakgrunn. Du kan tilpasse visningen av knappen ved å bruke CSS-stiler (størrelse, farge, kontur, gjennomsiktighet, etc.). Dermed er denne metoden mer fleksibel og gir flere alternativer når du legger til en "Tilbake til toppen"-knapp på nettstedet ditt.
"Tilbake til toppen"-knappen for et nettsted begynte å vises på mange nettsteder og blogger siden 2010. Er denne knappen nyttig, og bruker brukerne den? De bruker det, men ikke mye. Derfor legges denne knappen vanligvis til et sted på kanten av nettstedet (oftest nederst til høyre).
Det er tre implementeringer av den øverste knappen. Naturligvis kan hver av dem deles videre inn i noen finesser, men det er tre grunnleggende ideer. Vi vil se på hver av dem og gi hver vår vurdering.
Måter å implementere en tilbake til toppen-knappJeg starter med den beste metoden (implementeringskompleksiteten er middels).
1. Basert på JavaScript og AJAX (JQuery)Eksemplet beskrevet nedenfor er implementert på dette nettstedet.
I denne metoden bør vi få en flott knapp med følgende egenskaper:
- å trykke på knappen vil gi en jevn overgang til toppen av siden;
- knappen vil være gjennomsiktig;
- det er mulig å stille inn høyden i piksler når knappen blir synlig;
Hvis du gjør alt i henhold til instruksjonene, bør det ikke være noen problemer med å lage knappen. Så, trinnvise instruksjoner:
A. Opprette en js-fil
Åpne en notisblokk (jeg anbefaler Notepad++), lim inn koden nedenfor og lagre den med en .js-utvidelse (for eksempel gototop.js):
B. Stilinnstilling
Legg til følgende kode i stilfilen (stilfilen er en fil med filtypen .css). Oftest er navnet main.css eller style.css:
I stedet for top.png må du skrive inn hele eller relative adressen til bildet ditt. I stedet for 0px 0px og -56px 0px må du angi forskyvninger. Eller ikke bruk forskyvninger, men bare bruk et annet bilde når du klikker.
C. Koble skript til nettstedet
I eksemplet ovenfor brukte vi AJAX-teknologi, så vi må inkludere jquery-biblioteket. Du må også inkludere gototop.js-filen du opprettet i første avsnitt:
Og helt nederst på nettstedet (før body-taggen) legg til linjen:
Jeg har samlet alle filene som er nødvendige for dette i arkivet: gototop.rar
2. Knapp uten AJAXImplementeringen av denne metoden er veldig enkel, eller rettere sagt, det kunne ikke vært enklere. Dessuten vil jeg til og med dele denne metoden inn i to undermetoder.
2.1. Ved hjelp av et lenkeankerØverst på siden skriver vi en id for et element. Det ville være logisk å skrive det for tittelen, fordi dette er begynnelsen på innholdet. Og nedenfor kan du plassere en lenke til ankeret. Koden er omtrent slik:
... Artikkeltittel...Ulempene med denne metoden er betydelige:
- Tilbake til toppen-knappen vil alltid være synlig, selv om brukeren allerede er på toppen
- Det er nødvendig å registrere et anker. Dette er kanskje ikke alltid praktisk
- Overgangen til toppen er brå (det er ingen jevn bevegelse)
Det er én fordel: du trenger ikke bruke skript.
2.2. Bruker JavaScriptJavaScript-metoden er veldig lik den forrige. Den samme knappen, bare denne gangen trenger vi ikke å legge til et anker på alle sidene. Her er koden:
...Stilen kan skrives på samme måte som i eksempel 2.1.
Jeg tror at det er bedre å bruke metode 1, siden det har en mer behagelig visuell effekt for brukerne, noe som er veldig viktig i denne alderen
«Tilbake til toppen»-knappen er noe mange av dere sikkert har sett på mange nettsider. Dette er pilen som vises nederst til høyre på en nettside mens du blar. Når du klikker, tar det deg tilbake til toppen av siden. Hvis du ønsker å legge til en Tilbake til toppen-knapp som en del av nettstedets designprosess, eller bare lurer på hvordan du kan lage en selv, velkommen ombord!
Gå tilbake til toppenKoden vår vil bestå av to deler, CSS-stiler og et lite jQuery-skript. La oss starte med CSS.
CSS-stiler for knappenVi starter med å lage stiler og markeringer for knappen vår. Her er HTML-delen:
<
link
rel= "stilark" href= "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" >
<
a
id= "knapp" >
Knappen vil kun bestå av én ankertag med id-knapp. Vi inkluderer også en lenke til FontAwesome-biblioteket slik at vi kan bruke et ikon for knappen vår.
De første stilene for knappen vil se slik ut:
#knapp (display: inline-block; bakgrunnsfarge: #FF9800; width: 50px; height: 50px; text-align: center; border-radius: 4px; margin: 30px; posisjon: fast; bunn: 30px; høyre: 30px; overgang: bakgrunnsfarge .3s; z-indeks: 1000; ) #button:hover ( markør: peker; bakgrunnsfarge: #333; ) #knapp:aktiv ( bakgrunnsfarge: #555; )
Siden knappen er et buntelement og bunter er innebygde elementer som standard, må vi endre visningsegenskapen til en innebygd blokk slik at vi kan tilordne en størrelse til den.
La oss lage en kvadratisk knapp på 50x50 px med 4 px avrundede hjørner. Vi gir den en lys oransje farge og 30 px på hver side. Fast posisjon lar alltid knappen vår holde seg på samme sted når vi ruller siden, og z-indeksen er så høy at knappen alltid overlapper andre elementer på nettsiden. Når vi holder musepekeren over knappen, endres markøren til en peker og bakgrunnen blir mørkegrå. For å gjøre overgangen jevn, setter vi overgangen til 0,3 sekunder for bakgrunnsfargeegenskapen. Dessuten, når vi trykker på knappen, endres også bakgrunnsfargen og blir litt lysere.
Legger til et ikonNå er knappen tom, la oss legge til et ikon til den. Vi gjør dette ved å legge til et ::after pseudo=-element slik:
#button::after ( innhold: "\f077"; font-family: FontAwesome; font-weight: normal; font-style: normal; font-size: 2em; line-height: 50px; color: #fff; )
Vi skal velge et ikon fra det mest populære skriftbiblioteket, FontAwesome. La oss starte med Chevron Up-ikonet.
For å vise det i et pseudo-element, sett font-family-taggen til FontAwesome og tilordne en Unicode-verdi til ikonet ditt i innhold .
Sørg også for at linjehøyden din er lik høyden på ikonet ditt hvis du vil at det skal være sentrert horisontalt.
Legger til funksjonalitet med jQueryI denne underdelen vil vi snakke om hvordan du faktisk får knappen til å fungere. Den enkleste måten å gjøre dette på er å bruke jQuery JavaScript-biblioteket. Først må vi legge til jQuery i HTML-markeringen. Legg til denne linjen rett før den avsluttende body-taggen.
< script src=" https:// cdnjs. skyflare. com/ ajax/ libs/ jquery/3.1.1/ jquery. min. js">
Nå kan vi skrive skriptet vårt ved å bruke jQuery-syntaks. Legg til dette skriptet etter jQuery-linjen:
jQuery(document).ready(function() ( var btn = $("#button"); $(window).scroll(function() (if ($(window).scrollTop() > )); btn.on ("klikk", funksjon(e) ( e.preventDefault(); $("html, body").animate((scrollTop:0), "300"); )); ));
La oss se nærmere på dette manuset. Du la sannsynligvis merke til den første kodelinjen:
jQuery(document).ready(function () (
Du bør bare kjøre koden inne i denne funksjonen hvis dokumentet er fullt. Dette er en fin måte å forhindre feil hvis JavaScript-koden din ønsker å gjøre endringer på deler av nettsiden som ikke er fulllastet i nettleseren. Koden vi kjører etter at dokumentet er fullastet og består av to hovedblokker med kode, som hver gjør sin egen jobb. Den første delen av skriptet får knappen vår til å vises og forsvinne etter at siderullingen når et visst punkt. Den andre delen får siden til å rulle opp etter å ha klikket på knappen. La oss se på hver av dem i detalj.
Utseende og forsvinning av en knappHer er koden som er ansvarlig for denne funksjonen:
Var btn = $("#knapp"); $(window).scroll(function() ( if ($(window).scrollTop() > 300) ( btn.addClass("show"); ) else ( btn.removeClass("show"); ) ));
Vi erklærer først btn-variabelen og tildeler den ID-en til knappen slik at vi lettere kan referere til den senere i koden. Det hjelper også JavaScript med å utføre beregninger raskere. Når vi har lagret elementet i en variabel, trenger ikke JavaScript å søke på hele siden mange ganger når vi må bruke det igjen i koden vår.
jQuery har en hendig .scroll()-funksjon.
Den binder et stykke kode som vil bli utført hver gang det er en rulling på nettsiden din. Det tar én parameter til en funksjon som utføres hver gang siden rulles. Du kan bruke det på et hvilket som helst rullbart element, for eksempel rammer og elementer med tilleggsegenskaper satt til å rulle. Vi bruker det vanligvis på et vinduselement siden det er der rulling skjer i de fleste tilfeller, inkludert vårt eksempel.
$(vindu). scroll(funksjon()(
Inne i funksjonen legger vi en if/else-setning:
If ($(window).scrollTop() > 300) ( btn.addClass("show"); ) else ( btn.removeClass("show"); )
Det vi prøver å gjøre her er å sjekke den vertikale posisjonen til rullefeltet og få knappen vår til å vises når rullen er under et bestemt punkt, og forsvinne når den er over det punktet.
For å få rullefeltets nåværende posisjon, skal vi bruke jQuerys innebygde .scrollTop()-metode. Den returnerer ganske enkelt noen få piksler som er skjult over det rullbare området.
Så hver gang vi ruller på siden, sjekker JavaScript hvor mange piksler som er skjult og sammenligner dem med antallet. I vårt tilfelle er dette tallet opptil 300, men du kan endre det hvis du vil.
Hvis vi går 300px, vil vi legge til en showklasse til knappen vår som får den til å vises. Hvis tallet er mindre enn 300, fjerner vi denne klassen. Å legge til og fjerne klasser er en annen grunn til at jQuery er så populært. Vi kan gjøre dette ved å bruke to enkle metoder addClass() og removeClass(). Vi har imidlertid ingen utstillingsklasse i CSS ennå, så la oss legge til en:
If ($(window).scrollTop() > 300) ( btn.addClass("show"); ) else ( btn.removeClass("show"); )
Som standard vil knappen din være skjult, så vi må legge til noen flere regler til #button-elementet:
#knapp (overgang: bakgrunnsfarge .3s, opasitet .5s, synlighet .5s; opasitet: 0; synlighet: skjult; )
For å gjøre overgangen jevn, la oss legge til ytterligere to verdier til overgangsattributtet, opasitet og synlighet, satt til 0,5 sekunder.
Klatring til toppenDen andre delen av manuset lar deg gå ovenpå etter å ha trykket på en knapp.
Btn.on("klikk", funksjon(e) ( e.preventDefault(); $("html, body").animate((scrollTop:0), "300"); ));
Den første jQuery-metoden vi ser her er on() . Den første parameteren er en JavaScript-klikk-hendelse som oppstår hver gang vi klikker i nettleseren vår. Den andre parameteren er en behandlingsfunksjon som kjører så snart hendelsen inntreffer.
Behandlingsfunksjonen godtar en hendelsesparameter. Vi kan kalle det hva vi vil, men e eller arrangement er vanligvis foretrukket. Vi trenger en hendelsesparameter for å sende til funksjonen og bruke den for preventDefault()-metoden.
Metoden e.preventDefault() forhindrer hendelsen i å gjøre noe tilfeldig, for eksempel at koblingen ikke tar oss til neste side. I vårt tilfelle er dette ikke kritisk siden ankerelementet vårt ikke har et href-attributt og ikke vil ta oss til en ny side uansett, men det er alltid best å dobbeltsjekke.
jQuery .animate()-metoden er den som gjør hele trikset.
$("html, body").animate((scrollTop:0), "300");
Den første parameteren i .animate()-metoden er en liste over egenskaper som vi bør animere. Egenskapen vår heter scrollTop og vi vil at den skal ha en verdi på 0 . Typen av denne parameteren er et enkelt objekt, så vi må bruke krøllete klammeparenteser og skrive verdiene våre ved å bruke nøkkel/verdiparsyntaks.
Den andre parameteren er hastigheten vi vil at animasjonen vår skal starte med. Det måles i millisekunder, og jo høyere tall, desto tregere blir animasjonen. Standardverdien er 400, men la oss endre den til 300.
Til slutt bruker vi animasjonsmetoden på HTML- og body-elementene på siden vår.
Nå hver gang vi klikker på knappen, tar den oss tilbake til toppen av siden.
DemoDu kan se den endelige versjonen i CodePen-demoen. Jeg har også tatt med eksempeltekst for demonstrasjonsformål.
Se på koden for Tilbake til toppen-knappen av Matthew Cain (@matthewcain) på CodePen.
Fullføring"Tilbake til toppen"-knappen er et nyttig verktøy i sidegrensesnittdesign. Og hvis nettstedet ditt har en, vil det gjøre interaksjonen mellom besøkende med nettstedet mye mer praktisk. Denne veiledningen vil hjelpe deg å forstå CSS og JavaScript, selv om du ikke er en nettutvikler. Jeg håper at innlegget var nyttig for deg, og du vil definitivt kunne lage en slik knapp!
I dette innlegget vil vi lage en "Topp"-knapp, dens essens er at den vises når du ruller nedover siden, og når du klikker på den, vil den sende brukeren til toppen av gjeldende side. Jeg tror ikke det er verdt å forklare mye; vi har alle sett lignende "tilbake til toppen"-knapper på mange nettsteder.
Planlegg for å lage en "Tilbake til toppen"-knapp1. La oss lage en html-struktur for denne knappen.
2. La oss style det. La oss gjøre det usynlig og plassere det til høyre i forhold til kanten av siden.
3. La oss skrive et skript som viser knappen etter å ha rullet og behandler brukerens klikk på selve «Tilbake til toppen»-knappen.
Så alt er klart med handlingsplanen for å lage en knapp til toppen, la oss begynne å implementere den :)
1. La oss lage en html-struktur for "Tilbake til toppen"-knappenPlasser knappekoden før den avsluttende taggen
2. Stiler for "Tilbake til toppen"-knappenJeg bestemte meg for å lage knappen med en fast posisjon i nedre høyre hjørne. Jeg ga ikonet en fast størrelse, bakgrunnsfarge og avrundede hjørner.
Jeg justerte også stilen for hover-hendelsen og gjorde en jevn overgang ved å bruke overgangsegenskapen.
/* Tilbake til toppen-knapp */ #back-to-top( posisjon:fast; z-indeks: 999; display:ingen; bunn:70px; høyre:15px; markør:peker; ) #back-to-top i( width: 50px; height: 50px; display:block; color: #fff; background: #26ADE4; text-align:center; font-size:16px; line-height: 50px; border-radius: 5px; -webkit-transition : .3s alle; -moz-overgang: .3s alle; -ms-overgang: .3s alle; -o-overgang: .3s alle; overgang: .3s alle; ) #back-to-top i:hover(bakgrunn :#333;)
3. Skript for "Tilbake til toppen"-knappenFørst, la oss erklære noen få variabler. Den første grensen – vil inneholde verdien på 1/3 av skjermhøyden og vil tjene som en betingelse for utseendet til "Tilbake til toppen"-knappen vår.
Den andre backToTop vil lagre jQuerys utvalg av knappen vår for ikke å få tilgang til den flere ganger.
Var limit = $(window).height()/3, $backToTop = $("#back-to-top");
La oss skrive en betingelse for utseendet og forsvinningen av knappen vår. Betingelsen i vårt tilfelle vil være å sjekke om brukeren har rullet en tredjedel av skjermen eller ikke.
Hvis du har rullet, vil "Tilbake til toppen"-knappen vises; hvis ikke, eller returnert til toppen, vil den forsvinne.
$(window).scroll(function () ( if ($(this).scrollTop() > limit) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) ));
Den siste berøringen er å binde klikkhendelsen til vår "Tilbake til toppen"-knappen. Når vi klikker på knappen, skal vi føres til begynnelsen av gjeldende side. Vi vil gjøre dette med noen få linjer med kode:
// scroll body til 0px ved klikk $backToTop.click(function () ( $("body,html").animate(( scrollTop: 0 ), 1500); return false; ));
Slik ser hele koden ut
Var limit = $(window).height()/3, $backToTop = $("#back-to-top"); $(window).scroll(function () ( if ($(this).scrollTop() > limit) ( $backToTop.fadeIn(); ) else ( $backToTop.fadeOut(); ) )); // scroll body til 0px ved klikk $backToTop.click(function () ( $("body,html").animate(( scrollTop: 0 ), 1500); return false; ));
KonklusjonSå vi er ferdige med å lage "Tilbake til toppen"-knappen. Dette er bare ett av alternativene, som du kan diversifisere ved å gjøre endringer i CSS-delen av dette innlegget.
Demoartikkelen brukte CSS-effektene beskrevet i dette innlegget