Hvordan bla til toppen av siden ved hjelp av JavaScript/jQuery
Rullestangen eller rullefunksjonen bestemmer posisjonen som rullingen foregår. En rullefelt kan bevege seg horisontalt så vel som vertikalt. Den horisontale rullefeltet lar oss bla innholdet horisontalt jeg.e., venstre eller høyre. Mens den vertikale rullefeltet lar oss bla innholdet vertikalt jeg.e., opp eller ned.
Nå å stille spørsmål er hvordan du kan aktivere vertikal rulling i JavaScript eller jQuery, slik at når en bruker klikker på en knapp, ruller siden til den øverste posisjonen? Vi vil! Vi har et par tilnærminger som kan brukes til å utføre denne oppgaven.
Dette innlegget vil forklare arbeidet med de nedenfor børsnoterte tilnærmingene for å bla på siden til øverste stilling:
- Hvordan bla en side til den øverste posisjonen ved hjelp av JavaScript?
- Hvordan bla en side til den største posisjonen ved hjelp av jQuery?
Så la oss komme i gang!
Hvordan bla en side til den øverste posisjonen ved hjelp av JavaScript?
I JavaScript gir vindusgrensesnittet en innebygd metode som heter ScrollTo () som kan brukes til å bla til en bestemt posisjon på siden.
Syntaks
Du skal følge syntaksen nedenfor for å jobbe med ScrollTo () -metoden:
| 1 | vindu.Scrollto (x-koordinat, y-koordinat); |
Ovennevnte utdrag viser at vinduet.ScrollTo () -metoden aksepterer X-koordinat og Y-koordinat som parametere. Hvis vi spesifiserer begge koordinatene som "0", vil ROLLTO () -metoden flytte/bla siden til det øverste punktet.
Eksempel: Hvordan bruke vindu.ScrollTo () -metode?
| 1 2 3 4 5 6 7 8 9 10 11 12 1. 3 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
|
Ovennevnte program utførte de undergitte oppgavene:
- Opprettet
og
Tagger for å legge til overskrifter og anvendte inline CSS for å style dem.
- Opprettet et par avsnitt ved hjelp av
element.
- Opprettet en knapp som heter “Rollback til toppen!”.
- Klikk på “Rollbacken til toppen!”-Knappen vil påkalle“ Topfun () ”-metoden.
- Innenfor Topfun () -metoden benyttet vi vinduet.ScrollTo () -metode.
- Vi setter begge koordinater som 0, og klikket følgelig på “Rullbacken til toppen!”-Knappen vil bla siden til den øverste posisjonen.
Utgangen bekreftet at å klikke på knappen rullet siden til den øverste posisjonen.
Hvordan bla en side til den største posisjonen ved hjelp av jQuery?
JQuery gir en metode som heter “ScrollTop ()” som brukes til å returnere/angi den vertikale rullefeltposisjonen for det målrettede elementet. Posisjon 0 representerer at rullefeltet er på toppen. Så vi må passere “0” som et argument til “ScrollTop ()” -metoden for å bla tilbake til toppen av siden.
Syntaks
Følg den undergitte syntaks for å få den vertikale rulleposisjonen:
| 1 | $ (velger).ScrollTop (); |
Følg den undergitte syntaks for å stille den vertikale rulleposisjonen:
| 1 | $ (velger).ScrollTop (posisjon); |
Eksempel: Hvordan bruke ScrollTop () -metoden?
La oss vurdere følgende kodeblokk for å forstå arbeidet med rulle () -metoden:
| 1 2 3 4 5 6 7 8 9 10 11 12 1. 3 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
Ovennevnte kodeblokk utførte følgende funksjonaliteter:
- Opprettet
og
Tagger for å legge til overskrifter og anvendte inline CSS for å style dem.
- Opprettet et par avsnitt ved hjelp av
element.
- Opprettet en knapp som heter “Klikk her!”.
- Klikk på “Klikk her!”-Knappen vil påkalle“ Topfun () ”-metoden.
- Innenfor Topfun () -metoden benyttet vi oss av ScrollTop () -metoden.
- Vi passerte “0” som en posisjon til RullTop () -metoden. Følgelig klikk på “Klikk her!”-Knappen vil bla siden til den øverste posisjonen.
Slik fungerer SCROLLTOP () -metoden i jQuery
Konklusjon
I JavaScript, passerer “0, 0” som parameter til vinduet.ROLLTO () -metoden vil bla siden til den øverste posisjonen. I jQuery som passerer “0” som et argument til “ScrollTop ()” -metoden, vil metoden bla til siden til den øverste posisjonen. Dette innlegget vurderte et par eksempler for å gi en detaljert kunnskap om vinduet.ScrollTo () og ScrollTop () -metoder.