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

Hur skapar jag rullning till toppwidget för din webbplats?

1

Tillbaka till toppen eller bläddra till toppen är funktionen låter dig flytta till toppen av en sida genom att klicka på en pil som vanligtvis placeras nära nedre högra hörnet av sidan. Det är inte alltid nödvändigt att använda bilden för en sådan scroll -to -top -funktion. Eftersom varje bild skickar en separat HTTP -begäran till din server kommer det att lägga till den totala laddningstiden för webbplatsen och att anpassa bilden är inte heller så lätt. För att övervinna detta erbjuder vi nedanstående rullning till toppwidgeten med CSS och jQuery med fantastisk teckensymbol istället för bild så att du kan anpassa den efter din webbplats layout.

Relaterat: Hur lägger jag till rullning till den bästa widgeten på Weebly -webbplatsen?

Widgeten innehåller tre delar:

  • CSS
  • Manus
  • HTML

1 CSS -kod för widgeten Tillbaka till toppen

Nedan finns CSS -koden för widgeten och klistra in den här i rubriken på din webbplats.

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

Obs: I stället för bild använder vi typsnittet awesome icon, därför krävs CSS länkad i enlighet därmed.

2 jQuery Script för widgeten

Nedan finns skriptet för widgeten som måste placeras i sidfotsdelen på din webbplats.

<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 för widgeten

Och slutligen nedan är HTML -koden som ska placeras inuti kroppen på din webbsida för att möjliggöra funktionen tillbaka till toppen.

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

Anpassa funktionerna Tillbaka till toppen

Fördelen med att använda denna widget är att du kan anpassa hela funktionen efter dina behov. Här är några av anpassningsalternativen för dig:

Rullningshastighet

Standardhastigheten för rullning är satt till 600 i skriptet som du kan öka eller minska.

Funktion Koda Var man ska leta
Rullningshastighet var duration = 600; Manus

Rullningsikon Visningsposition

Pilen kommer att börja visas när rullningslisten är på positionen 200px från toppen, vilket är definierat i skriptet med koden nedan:

Funktion Koda Var man ska leta
Rullningsikon Startposition var offset = 200; Manus

Du kan ändra startpositionen efter behov.

Ikonens position

Som standard visas uppåtpilen 60px upp och 55px från nedre högra hörnet enligt definitionen i CSS -stilen. Du kan ändra det på test- och felmetod för att kontrollera lämplig position för din webbplats.

Funktion Koda Var man ska leta
Rullande ikonposition i nedre högra hörnet bredd: 55px; höjd: 60px; Stil

Ikon stil

Vi använde typsnittet fantastiska ikonen "fa-arrow-cirkel-upp" som du kan ändra den i HTML-koden.

Funktion Koda Var man ska leta
Tillbaka till toppen Ikonstil <i class = “fa fa-pil-cirkel-upp”> </i> HTML

Se avsnittet riktningsikoner i listan med fantastiska teckensnitt för att använda alternativ ikon för din webbplats.

Ikonstorlek

Standard 50px används som teckenstorlek för ikonen i CSS -stil som du kan ändra efter dina behov.

Funktion Koda Var man ska leta
Tillbaka till toppen Ikonstorlek typsnitt: 50px; Stil

Ikonfärg

Detta är den viktigaste delen av anpassningen där färgen på teckensnittsikonen enkelt kan ändras för att passa din webbplats layout. Leta efter koden "färg: #808080;" i CSS -koden och ändra den till vilken färg du vill.

Funktion Koda Var man ska leta
Tillbaka till toppen Ikonfärg färg: #808080; Stil

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