Kuinka luoda vieritys sivun alkuun -widgettiin?

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ää.

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:

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.

Kuvakkeen tyyli

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

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.

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.