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

Hvordan lage rull til topp widget for nettstedet ditt?

8

Tilbake til toppen eller bla til toppen er funksjonen som lar deg flytte til toppen av en side ved å klikke på en pil som vanligvis er plassert nær nedre høyre hjørne av siden. Det er ikke alltid nødvendig å bruke bildet for en slik rulling til toppfunksjon. Siden hvert bilde sender en egen HTTP -forespørsel til serveren din, vil det legge til den totale nettstedets lastetid, og det er heller ikke veldig lett å tilpasse bildet. For å overvinne dette tilbyr vi rullingen til toppen av widgeten nedenfor med CSS og jQuery med et fantastisk ikon i skrifttype i stedet for bilde, slik at du kan tilpasse det til nettstedets layout.

Relatert: Hvordan legge til rull til topp widget på Weebly -området?

Widgeten inneholder tre deler:

  • CSS
  • Manus
  • HTML

1 CSS -kode for widgeten Back To Top

Nedenfor er CSS -koden for widgeten og lim den inn i toppteksten på nettstedet ditt.

<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">

Merk: I stedet for bilde bruker vi font -ikonet, og derfor er nødvendig CSS koblet deretter.

2 jQuery -skript for widgeten

Nedenfor er skriptet for widgeten som må plasseres i bunnteksten på nettstedet ditt.

<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 HTML for widgeten

Og til slutt nedenfor er HTML -koden som skal plasseres inne i kroppen på nettsiden din for å aktivere funksjonen tilbake til toppen.

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

Tilpasse funksjonene Tilbake til toppen

Fordelen med å bruke denne widgeten er at du kan tilpasse hele funksjonen etter behov. Her er noen av tilpasningsalternativene for deg:

Rullehastighet

Standardhastigheten for rulling er satt til 600 i skriptet, som du kan øke eller redusere.

Trekk Kode Hvor du skal se
Rullehastighet var varighet = 600; Manus

Rulleikon Visningsposisjon

Pilikonet vil begynne å vises når rullefeltet er på posisjonen 200px fra toppen som er definert i skriptet med koden nedenfor:

Trekk Kode Hvor du skal se
Rulleikon Startposisjon ble forskjøvet = 200; Manus

Du kan endre startposisjonen etter behov.

Posisjonen til ikonet

Som standard vil pil opp -ikonet vises 60px opp og 55px unna nedre høyre hjørne som definert i CSS -stilen. Du kan endre den på prøve- og feilmetoden for å sjekke den riktige plasseringen for nettstedet ditt.

Trekk Kode Hvor du skal se
Rullende ikonposisjon i nedre høyre hjørne bredde: 55px; høyde: 60px; Stil

Ikon stil

Vi brukte font-ikonet "fa-arrow-sirkel-opp", som du kan endre det i HTML-koden.

Trekk Kode Hvor du skal se
Tilbake til toppen Ikonstil <i class = “fa fa-arrow-circle-up”> </i> HTML

Henvise retnings ikoner delen av skriftkjempeflott ikoner liste å bruke alternative ikon for nettstedet ditt.

Ikonstørrelse

Standard 50px brukes som skriftstørrelse for ikonet i CSS -stil, som du kan endre etter behov.

Trekk Kode Hvor du skal se
Tilbake til toppen Ikonstørrelse skriftstørrelse: 50px; Stil

Ikon Farge

Dette er den viktigste delen av tilpasningen der fargen på skriftikonet enkelt kan endres for å passe nettstedets layout. Se etter koden “color: #808080;” i CSS -koden og endre den til hvilken som helst farge du trenger.

Trekk Kode Hvor du skal se
Tilbake til toppen Ikonfarge farge: #808080; Stil

Opptakskilde: www.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