TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka luoda vieritys sivun alkuun -widgettiin?

20

Takaisin alkuun tai vierittäminen alkuun on ominaisuus, jonka avulla voit siirtyä sivun yläosaan napsauttamalla nuolta, joka on yleensä sijoitettu sivun oikean alakulman lähelle. Aina ei tarvitse käyttää kuvaa tällaiseen vierittämiseen alkuun -ominaisuuteen. Koska jokainen kuva lähettää erillisen HTTP -pyynnön palvelimellesi, se lisää sivuston latausajan ja kuvan mukauttaminen ei myöskään ole kovin helppoa. Tämän ratkaisemiseksi tarjoamme alla olevan vierittämällä alkuun widgetin, jossa on CSS ja jQuery ja fontin mahtava kuvake kuvan sijasta, jotta voit muokata sivustosi ulkoasun mukaan.

Aiheeseen liittyviä: Miten vieritys lisätään Weebly -sivuston alkuun widgettiin?

Widget sisältää kolme osaa:

  • CSS
  • Käsikirjoitus
  • HTML

1 CSS -koodi Takaisin alkuun -widgetille

Alla on widgetin CSS -koodi ja liitä se sivustosi otsikko -osioon.

<style> .backtotop { background: none; margin: 0; position: fixed; bottom: 0; right: 0; width: 55px; height: 60px; z-index: 100; display: none; text-decoration: none; color: #808080; } .backtotop i { font-size: 50px; } </style> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Huomautus: Kuvan sijasta käytämme mahtavaa kirjasinkuvaketta, joten vaadittu CSS linkitetään vastaavasti.

2 jQuery -skripti widgetille

Alla on skripti widgetille, joka on sijoitettava sivustosi alatunnisteeseen.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function() { $('.backtotop').css({'display': 'none'}); var offset = 200; var duration = 600; $(window).scroll(function() { if ($(this).scrollTop() > offset) { $('.backtotop').fadeIn(duration); } else { $('.backtotop').fadeOut(duration); } }); $('.backtotop').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script>

3 Widgetin HTML

Ja lopuksi alla on HTML -koodi, joka sijoitetaan verkkosivun runkoon, jotta takaisin alkuun -toiminto voidaan ottaa käyttöön.

<a href="#" class="backtotop" style="display: inline;"> <i class="fa fa-arrow-circle-up"></i> </a>

Takaisin alkuun -ominaisuuksien mukauttaminen

Tämän widgetin käytön etuna on, että voit muokata koko toimintoa tarpeidesi mukaan. Tässä muutamia mukautusvaihtoehtoja sinulle:

Vieritysnopeus

Vierityksen oletusnopeus on skriptissä 600, jota voit lisätä tai vähentää.

Ominaisuus Koodi Mistä etsiä
Vieritysnopeus var kesto = 600; Käsikirjoitus

Vierityskuvake Näytön sijainti

Nuolikuvake alkaa näkyä, kun vierityspalkki on 200px: n päässä ylhäältä, joka on määritelty skriptissä alla olevalla koodilla:

Ominaisuus Koodi Mistä etsiä
Vierityskuvake Aloitusasento oli offset = 200; Käsikirjoitus

Voit muuttaa aloitusasentoa tarpeen mukaan.

Kuvakkeen sijainti

Oletuksena ylänuolikuvake näkyy 60 pikseliä ylöspäin ja 55 kuvapistettä kauempana oikeasta alakulmasta CSS -tyylin mukaisesti. Voit muuttaa sitä kokeilu- ja erehdysmenetelmällä ja tarkistaa sivustollesi sopivan sijainnin.

Ominaisuus Koodi Mistä etsiä
Vierittävän kuvakkeen sijainti oikeassa alakulmassa leveys: 55 kuvapistettä; korkeus: 60 kuvapistettä; Tyyli

Kuvakkeen tyyli

Käytimme mahtavaa fontin kuvaketta "fa-arrow-circle-up", jonka voit muuttaa HTML-koodissa.

Ominaisuus Koodi Mistä etsiä
Takaisin alkuun Kuvaketyyli <i class = “fa fa-arrow-circle-up”> </i> HTML

Katso fontin mahtavien kuvakkeiden luettelon suuntakuvakkeet -osiosta vaihtoehtoista kuvaketta sivustollesi.

Kuvakkeen koko

Oletusarvoista 50 kuvapistettä käytetään CSS -tyylin kuvakkeen fonttikoona, jota voit muuttaa tarpeen mukaan.

Ominaisuus Koodi Mistä etsiä
Takaisin alkuun Kuvakkeen koko fontin koko: 50px; Tyyli

Kuvake Väri

Tämä on tärkein osa räätälöintiä, jossa kirjasinkuvakkeen väri voidaan helposti muuttaa sivustosi asettelun mukaan. Etsi koodi "väri: #808080;" CSS -koodissa ja muuta se haluamaasi väriin.

Ominaisuus Koodi Mistä etsiä
Takaisin alkuun Kuvakkeen väri väri: #808080; Tyyli

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja