Kuinka lisätä vieritys alkuun -painikkeeseen Weebly -sivustossa?

Vieritä ylös on yksinkertainen ja hyödyllinen ominaisuus, jota käytetään siirtymään verkkosivun alkuun mistä tahansa alhaalta. Olet ehkä huomannut ylänuoli -merkin useimpien sivustojen oikeassa alakulmassa ja klikkaamalla nuolikuvaketta pääset sivun yläreunaan. Tämä on hyödyllinen ominaisuus etenkin pitkille sisällöille. Tässä artikkelissa kerrotaan, miten voit lisätä vierityksen alkuun tai takaisin alkuun -toiminnon ilmaiseen Weebly -sivustoosi. Opi yli 200 ilmaista Weebly -opetusohjelmaa Weebly -sivustosi optimoimiseksi.

Tässä on yhteenveto vierityksen lisäämisestä alkuun tai takaisin ylös -painikkeeseen:

1. Lataa ja muokkaa vieritys ylimpään JavaScript -tiedostoon.
2. Lataa ylöspäin osoittava kuva.
3. Lataa JavaScript- ja kuvatiedosto Weebly -sivustoosi.
4. Lisää Vieritä kaikkien sivujen alkuun.
5. Lisää vieritys tiettyjen sivujen alkuun.

Keskustelkaamme jokaisesta vaiheesta yksityiskohtaisesti.

Vaihe 1: Lataa ja muokkaa komentotiedostoa

• Lataa zip -tiedosto ja pura se JavaScript -tiedostoon nimeltä "scrolltopcontrol.js".
• Avaa tiedosto editorissa, kuten Notepad tai TextEdit, ja etsi koodi img src = "up.png”.
• Korvaa se Weebly -sivustosi kuvapolulla seuraavasti:

img src="https://yoursitename.weebly.com/files/theme/up_arrow.png"

• Tallenna muokattu tiedosto.

Vaihe 2: Ylänuolikuvan lataaminen

Vaihe 3: Tiedostojen lataaminen Weebly -sivustoosi

• Kirjaudu sisään Weebly -tiliisi ja valitse sivusto, jonka haluat lisätä, vieritä alkuun.
• Siirry Weebly -editorissa Teema -välilehteen ja napsauta sitten Muokkaa HTML/CSS -painiketta.
• Napsauta "Resurssit" -välilehden "+" -kuvaketta, valitse avattavasta valikosta "Lataa tiedostot" ja lataa muokattu "scrolltopcontrol.js" -tiedosto.
• Lataa samalla tavalla “up_arrow.png” kuvatiedosto.
• Tallenna teema, jos lataat tiedostoja sivustollesi ensimmäistä kertaa, sinua kehotetaan antamaan uusi teemanimi sivustollesi. Kirjoita uusi teemanimi ja tallenna muutokset.

Nyt olet melkein valmis ja sinulla on kaksi vaihtoehtoa lisätä vieritys alkuun:

1. Lisää kaikki sivuston sivut.
2. Vain tietyillä sivuilla.

Tiedoston lataaminen Weebly -sivustolle

Vaihe 4: Vierittämisen lisääminen alkuun kaikilla sivuilla

Kopioi alla oleva koodi ja muokkaa sitä korvaamalla "yoursitename.weebly.com" oikealla Weebly -sivustosi nimellä.

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

Siirry Weebly -editorin "Asetukset" -välilehteen ja liitä koodi SEO -osion "Otsikkokoodi" -ruutuun alla olevan kuvan mukaisesti.

Lisää koodi Weebly -sivuston etusivulle

Tallenna muutokset ja julkaise sivustosi, niin näet nuolipainikkeen oikeassa alakulmassa vierittäessäsi alas. Näet ylöspäin osoittavan kuvan kaikilla sivuillasi ja klikkaamalla kuvaa pääset sivustosi alkuun.

Varoitus: Jos vieritystoiminto ei toimi, yritä liittää koodi "Alatunniste" -osaan "Otsikkokoodi" -osan sijaan.

Vaihe 5: Vierittämisen lisääminen tiettyjen sivujen alkuun

Siirry Weebly -editorin "Sivut" -välilehdelle ja valitse sivu, jonka haluat lisätä vierityksen alkuun. Napsauta "Lisäasetukset" -linkkiä ja liitä yllä oleva koodi " Otsikkokoodi " -ruutuun alla olevan kuvan mukaisesti. Muista korvata "yoursitename.weebly.com" oikealla Weebly -sivustosi nimellä.

Lisää koodi yhdelle Weebly -sivulle

Tallenna muutokset ja julkaise sivustosi. Avaa tietty sivu ja katso, että nuolipainike on nyt sivun oikeassa alakulmassa vieritettäessä alas.

Takaisin alkuun -tekstin käyttäminen

Jos haluat käyttää tekstiä kuvan sijasta, lisää vain alla oleva koodi mihin tahansa sivullesi käyttämällä Upota koodi -elementtiä.

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

Voit myös käyttää tätä koodia Asetukset -välilehden "SEO" -osiossa olevan "Alatunnisteen koodi" -ruudussa lisätäksesi "Takaisin alkuun" sivustosi alatunnisteeseen. ja
tunnisteiden avulla voit kohdistaa tekstin vastaavasti.

Huomautus: # yläosan sijasta voit siirtyä mihin tahansa sivun HTML -ankkuriin vierittääksesi siihen.

"Vieritä alkuun" -ohjaimen kohdepaikan muuttaminen

Kun napsautat ylänuolta, vierityspalkki siirretään oletuksena sivun yläreunaan. Jos haluat siirtyä johonkin muuhun paikkaan, voit hallita sitä muuttamalla "scrollto" -määritettä .js -tiedoston sisällä. Esimerkiksi "scrollto: 0": n muuttaminen "scroll: 100": ksi vierityspalkin 100 pikseliä ylimmän sijainnin alapuolelle. Voit myös siirtää sijainnin mihin tahansa sivullasi määritettyyn elementtiin kahden alla olevan vaiheen avulla.

• Vaihe 1 – Määrittele elementti – Esimerkiksi H2: n määrittämiseen käytä upotuskoodi -elementtiä ja lisää alla oleva koodi:

<h2 id="movehere">Move the Scroll bar here </h2>

• Vaihe 2 – Muuta sitten määritettä vierittämällä: "movehere" .js -tiedoston sisällä alla olevan kuvan mukaisesti:

setting: {startline:100, scrollto: "movehere", scrollduration:1000, fadeduration:[500, 100]},

Tämä siirtää vierityspalkin siihen H2 -otsikkokohtaan, kun napsautat ylänuolta tai takaisin ylälinkkiä.