Home-theater-designers
Vieritä ylös -painikkeella voit palauttaa näkymän helposti sivun yläosaan. Tämä pieni UX -ominaisuus on hyvin yleinen nykyaikaisilla verkkosivustoilla. Se on erityisen hyödyllinen verkkosivuille, joilla on paljon sisältöä, kuten yksisivuisille sovelluksille.
windows 10 levy 100%
Tässä artikkelissa opit luomaan vierityspainike JavaScriptin ja jQueryn avulla.
Selausnäppäimen luominen JavaScriptin avulla
Voit lisätä vierityspainike verkkosivustollesi seuraavan koodinpätkän avulla:
HTML -koodi
Scroll-to-Top button using JavaScript
Scroll down the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Tässä luodaan verkkosivun perusrakenne nuketiedoilla. Sinun tarvitsee vain keskittyä vierityspainikkeeseen.
Kun tätä painiketta napsautetaan, sivu vieritetään alkuun. Tämä toimii jQuery -koodin lisäämisen jälkeen.
jQuery -koodi
Aiheeseen liittyviä: Opi luomaan elementti jQueryssä
// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});Tässä, näytä luokka lisätään painike -elementtiin, jos käyttäjä vierittää verkkosivulla yli 300 pikseliä. Tämä näytä luokka tekee painike -elementin näkyviin. Oletuksena painike -elementin näkyvyys on piilotettu. Lisätietoja painikkeesta on seuraavassa CSS -koodissa.
CSS -koodi
Aiheeseen liittyviä: Yksinkertaisia CSS -koodiesimerkkejä, jotka opit 10 minuutissa
#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: 'f077';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media (min-width: 500px) {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h1 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}Yllä olevaa CSS: ää käytetään vierityspainike ja verkkosivun muotoiluun. Voit pelata CSS -koodilla ja muotoilla painikkeen tarpeidesi mukaan.
Nyt sinulla on täysin toimiva vieritys ylös / takaisin ylös -painike. Jos haluat tarkastella tässä artikkelissa käytettyä lähdekoodia, tässä on GitHub -arkisto samasta.
Huomautus : Tässä artikkelissa käytetty koodi on MIT -lisensoitu .
Lue lisää käyttäjäkokemuksesta
Käyttökokemus keskittyy siihen, täyttääkö tuote käyttäjiensä tarpeet. Jos olet suunnittelija tai kehittäjä, sinun on hyvä noudattaa UX -suunnitteluperiaatteita ja luoda mahtavia tuotteita. Jos tämä kenttä kiinnostaa sinua, sinun on aloitettava oikea polku.
Sinulla ei ole käyttöoikeutta päästäJaa Jaa Tweet Sähköposti Haluatko olla UX -suunnittelija? Näin pääset alkuun
UX Designerin tehtävä on varmistaa, että ohjelmistokäyttäjän tarpeet huomioidaan ja että he ovat tyytyväisiä prosessiin.
Lue seuraava Liittyvät aiheet- Ohjelmointi
- JavaScript
- jQuery
Yuvraj on tietojenkäsittelytieteen perusopiskelija Delhin yliopistossa Intiassa. Hän on intohimoinen Full Stack Web -kehityksestä. Kun hän ei kirjoita, hän tutkii eri tekniikoiden syvyyttä.
Lisää Yuvraj Chandraltatilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi