TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger man till rullning till toppknappen på Weebly -webbplatsen?

0

Bläddra till toppen är en enkel och användbar funktion som används för att gå till toppen av en webbsida var som helst nerifrån. Du kanske har märkt en pil upp i det nedre högra nedre hörnet på de flesta webbplatserna och genom att klicka på pilbilden kommer du till toppen av sidan. Detta är en användbar funktion särskilt för sidor med långt innehåll. Den här artikeln förklarar hur du lägger till rullning till toppen eller tillbaka till toppfunktionen på din gratis Weebly -webbplats. Lär dig mer än 200 gratis Weebly -handledning för att optimera din Weebly -webbplats.

Här är en sammanfattning av stegen för att lägga till rullning till toppen eller tillbaka till toppen -knappen:

  1. Ladda ner och ändra rullning till toppen JavaScript -fil.
  2. Ladda ner uppåtpilen.
  3. Ladda upp JavaScript och bildfil till din Weebly -webbplats.
  4. Lägg till Bläddra till toppen på alla sidor.
  5. Lägg till rullning till toppen på specifika sidor.

Låt oss diskutera varje steg i detalj.

Steg 1: Ladda ner och ändra skriptfilen

  • Ladda ner zip -filen och extrahera den till en JavaScript -fil med namnet "scrolltopcontrol.js".
  • Öppna filen i redigeraren som Anteckningar eller TextEdit och leta efter koden img src = "up.png”.
  • Ersätt den med bildvägen för din Weebly -webbplats enligt nedan:
img src="https://yoursitename.weebly.com/files/theme/up_arrow.png"
  • Spara den ändrade filen.

Steg 2: Ladda ner uppåtpil

Steg 3: Ladda upp filer till din Weebly -webbplats

  • Logga in på ditt Weebly -konto och välj den webbplats du vill lägga till, rulla till toppfunktionen.
  • I Weebly -redigeraren går du till fliken "Tema" och klickar sedan på knappen " Redigera HTML/CSS ".
  • Klicka på "+" -ikonen på fliken "Tillgångar", välj "Ladda upp fil (er) från rullgardinsmenyn och ladda upp den ändrade filen" scrolltopcontrol.js ".
  • Ladda upp bildfilen “up_arrow.png” på samma sätt.
  • Spara ditt tema, om det är första gången du laddar upp filer till din webbplats kommer du att bli ombedd att ange ett nytt temanamn för din webbplats. Ange ett nytt temanamn och spara dina ändringar.

Nu är du nästan klar och har två alternativ för att lägga till rullningsfunktionen:

  1. Lägg till på alla sidor på webbplatsen.
  2. Endast på specifika sidor.

Hur lägger man till rullning till toppknappen på Weebly -webbplatsen?

Ladda upp fil på Weebly -webbplatsen

Steg 4: Lägga till Scroll to Top på alla sidor

Kopiera koden nedan och ändra den genom att ersätta "dittnamn.weebly.com" med ditt riktiga Weebly -webbplatsnamn.

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

Gå till fliken "Inställningar" i Weebly -redigeraren och klistra in koden i rutan "Rubrikkod" under avsnittet "SEO" som visas på bilden nedan.

Hur lägger man till rullning till toppknappen på Weebly -webbplatsen?

Lägg till kod i Weebly Site Home

Spara dina ändringar och publicera din webbplats för att se en pilknapp placerad i det nedre högra hörnet när du rullar ner. Du kan se uppåtpilen på alla dina sidor och klicka på bilden tar dig till toppen av din webbplats.

Varning: Om rullningsfunktionen inte fungerar kan du försöka klistra in koden i avsnittet "Sidkod" istället för avsnittet "Rubrikkod".

Steg 5: Lägga till Scroll to Top på specifika sidor

Gå till fliken "Sidor" i Weebly -redigeraren och välj den sida du vill lägga till bläddra till toppfunktionen. Klicka på länken "Avancerade inställningar" och klistra in ovanstående kod i rutan " Rubrikkod " enligt bilden nedan. Kom ihåg att ersätta “yoursitename.weebly.com” med ditt riktiga Weebly -webbplatsnamn.

Hur lägger man till rullning till toppknappen på Weebly -webbplatsen?

Lägg till kod på Single Weebly Page

Spara ändringarna och publicera din webbplats. Öppna den specifika sidan och se att pilknappen nu är placerad i det nedre högra hörnet på din sida när du rullar ner.

Använda tillbaka till toppen text

Om du vill använda text istället för en bild, lägg bara till koden nedan var som helst på din sida med hjälp av ett " Bädda in kod " -element.

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

Du kan också använda den här koden i rutan "Sidkod" under avsnittet "SEO" på fliken "Inställningar" för att lägga till "Tillbaka till toppen" i sidfoten på din webbplats. använda och
taggar för att anpassa texten i enlighet därmed.

Obs! Istället för #top kan du använda valfritt HTML -ankare på din sida för att rulla till den positionen.

Ändra måldestinationen för "Scroll To Top" -kontrollen

När du klickar på uppåtpilen flyttas rullningsfältet som standard till toppen av sidan. Om du vill flytta till någon annan position kan du styra den genom att ändra attributet “scrollto” inuti .js -filen. Om du till exempel ändrar "scrollto: 0" till "scroll: 100" flyttas rullningslisten 100 pixlar under toppositionen. Du kan också flytta positionen till valfritt element som definieras på din sida med hjälp av två steg nedan.

  • Steg 1 – Definiera elementet – Till exempel för att definiera ett H2 använd inbäddningskodelement och lägg till koden nedan:
<h2 id="movehere">Move the Scroll bar here </h2>
  • Steg 2 – Ändra sedan attributet som scrollto: “movehere” inuti .js -filen enligt nedan:
setting: {startline:100, scrollto: "movehere", scrollduration:1000, fadeduration:[500, 100]},

Detta kommer att flytta rullningslisten till den H2 -rubrikpositionen när du klickar på uppåtpilen eller tillbaka till topplänken.

Inspelningskälla: webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer