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 |