TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan legge til rulle til toppknapp på Weebly Site?

2

Rull til toppen er en enkel og nyttig funksjon som brukes til å gå til toppen av en webside hvor som helst fra ned. Du har kanskje lagt merke til et pil opp i det nedre høyre hjørnet på de fleste nettstedene, og ved å klikke på pilbildet vil du bli tatt til toppen av siden. Dette er en nyttig funksjon spesielt for sider med langt innhold. Denne artikkelen forklarer hvordan du legger til rulling til toppen eller tilbake til toppfunksjonen på ditt gratis Weebly -nettsted. Lær mer enn 200 gratis Weebly -opplæringsprogrammer for å optimalisere Weebly -nettstedet ditt.

Her er sammendraget av trinnene som er involvert i å legge til rulle til toppen eller tilbake til toppen -knappen:

  1. Last ned og endre bla til toppen JavaScript -fil.
  2. Last ned pilen opp.
  3. Last opp JavaScript og bildefil til ditt Weebly -nettsted.
  4. Legg til Rull til toppen på alle sider.
  5. Legg til rull til toppen på bestemte sider.

La oss diskutere hvert trinn i detalj.

Trinn 1: Last ned og endre skriptfilen

  • Last ned zip -filen og pakk den ut til en JavaScript -fil med navnet “scrolltopcontrol.js".
  • Åpne filen i editoren som Notisblokk eller TextEdit og se etter koden img src = “up.png”.
  • Erstatt den med bildebanen til Weebly -nettstedet ditt som nedenfor:
img src="https://yoursitename.weebly.com/files/theme/up_arrow.png"
  • Lagre den endrede filen.

Trinn 2: Last ned pilen opp

Trinn 3: Last opp filer til ditt Weebly -nettsted

  • Logg deg på Weebly -kontoen din og velg nettstedet du vil legge til, bla til toppfunksjonen.
  • I Weebly -editoren går du til kategorien "Tema" og klikker deretter på " Rediger HTML/CSS " -knappen.
  • Klikk på "+" – ikonet i "Assets" – fanen, velg "Last opp fil (er) fra rullegardinmenyen og last opp den endrede" scrolltopcontrol.js " – filen.
  • Last opp bildefilen “up_arrow.png” på samme måte.
  • Lagre temaet ditt, hvis dette er første gang du laster opp filer til nettstedet ditt, blir du bedt om å skrive inn et nytt temanavn for nettstedet ditt. Skriv inn et nytt temanavn og lagre endringene.

Nå er du nesten ferdig og sitter igjen med to alternativer for å legge til rullefunksjonen:

  1. Legg til på alle sidene på nettstedet.
  2. Bare på bestemte sider.

Hvordan legge til rulle til toppknapp på Weebly Site?

Laster opp fil på Weebly -nettstedet

Trinn 4: Legge til Rull til toppen på alle sider

Kopier koden nedenfor og endre den ved å erstatte "dittnamn.weebly.com" med ditt virkelige Weebly -nettstednavn.

<script type="text/javascript" src="https://yoursitename.weebly.com/files/theme/scrolltopcontrol.js"></script>

Gå til "Innstillinger" -fanen i Weebly -editoren og lim inn koden i "Header Code" -boksen under "SEO" -delen som vist på bildet nedenfor.

Hvordan legge til rulle til toppknapp på Weebly Site?

Legg til kode i Weebly Site Home

Lagre endringene og publiser nettstedet ditt for å se en pilknapp plassert i nedre høyre hjørne når du blar ned. Du kan se pil opp -bildet på alle sidene dine, og klikk på bildet tar deg til toppen av nettstedet ditt.

Advarsel: Hvis rullefunksjonen ikke fungerer, kan du prøve å lime inn koden i delen "Footer Code" i stedet for "Header Code" -delen.

Trinn 5: Legge til Rull til toppen på bestemte sider

Gå til kategorien "Sider" i Weebly -editoren og velg siden du vil legge til bla til toppfunksjonen. Klikk på koblingen "Avanserte innstillinger" og lim inn koden ovenfor i boksen " Overskriftskode " som vist på bildet nedenfor. Husk å erstatte “yoursitename.weebly.com” med ditt virkelige Weebly -nettstednavn.

Hvordan legge til rulle til toppknapp på Weebly Site?

Legg til kode på Single Weebly Page

Lagre endringene og publiser nettstedet ditt. Åpne den aktuelle siden og se at pilknappen nå er plassert i nedre høyre hjørne av siden når du blar ned.

Bruke tilbake til toppen tekst

Hvis du vil bruke tekst i stedet for et bilde, er det bare å legge til koden nedenfor hvor som helst på siden din ved å bruke et " Embed Code " -element.

<a href="#top">Back to Top</a>

Du kan også bruke denne koden i "Footer Code" -boksen under "SEO" -delen av "Settings" -fanen for å legge til "Back to Top" i bunnteksten på nettstedet ditt. bruk og
tagger for å justere teksten deretter.

Merk: I stedet for #top kan du bruke et hvilket som helst HTML -anker på siden din for å bla til den posisjonen.

Endre måldestinasjonen for "Rull til topp" -kontrollen

Når du klikker på pil opp, flyttes rullefeltet som standard til toppen av siden. Hvis du vil flytte til en annen posisjon, kan du kontrollere den ved å endre “scrollto” -attributtet inne i .js -filen. Hvis du for eksempel endrer “scrollto: 0” til “scroll: 100”, flytter rullefeltet 100 piksler under topposisjonen. Du kan også flytte posisjonen til ethvert element som er definert på siden din ved å bruke to trinn nedenfor.

  • Trinn 1 – Definer elementet – For eksempel for å definere et H2, bruk innebygd kodeelement og legg til koden nedenfor:
<h2 id="movehere">Move the Scroll bar here </h2>
  • Trinn 2 – Endre deretter attributtet som scrollto: “movehere” inne i .js -filen som vist nedenfor:
setting: {startline:100, scrollto: "movehere", scrollduration:1000, fadeduration:[500, 100]},

Dette flytter rullefeltet til H2 -posisjonen når du klikker på pil opp eller tilbake til topplenken.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon