Home-theater-designers
A „görgetés felfelé” gombbal könnyedén visszatérhet a nézet az oldal tetejére. Ez a kis UX szolgáltatás nagyon gyakori a modern webhelyeken. Ez különösen hasznos olyan weboldalaknál, amelyek sok tartalmat tartalmaznak, például egyoldalas alkalmazásokat.
A legjobb fotóalkalmazás a Windows 10 rendszerhez
Ebből a cikkből megtudhatja, hogyan hozhat létre görgetés a tetejére gombot JavaScript és jQuery használatával.
Hogyan lehet görgetős gombot létrehozni a JavaScript használatával
Az alábbi kódrészlet segítségével felvehet egy görgetős gombot a webhelyére:
HTML kód
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.
Itt a weblap alapvető struktúrája jön létre, hamis adatokkal. Csak a felfelé görgetés gombra kell összpontosítania.
Ha erre a gombra kattint, az oldal felfelé görget. Ez a jQuery kód hozzáadása után működik.
jQuery kód
Összefüggő: Ismerje meg, hogyan hozhat létre elemet a jQuery -ben
// ===== 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');
});Itt, a előadás osztály hozzáadódik a gombelemhez, ha a felhasználó több mint 300 képpontot görget a weboldalon. Ez előadás osztály láthatóvá teszi a gombelemet. Alapértelmezés szerint a gombelem láthatósága rejtve marad. További információ a gombról a következő CSS kódban található.
CSS kód
Összefüggő: Egyszerű CSS -kód példák, amelyeket 10 perc alatt megtanulhat
#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;
}A fenti CSS a görgetés a tetejére gomb és a weboldal stílusának kialakítására szolgál. Játszhat a CSS -kóddal, és stílusát a gombbal igényei szerint alakíthatja.
Most már van egy teljesen működőképes görgetés a tetejére / vissza a tetejére gomb. Ha meg szeretné tekinteni a cikkben használt teljes forráskódot, itt van GitHub adattár ugyanabból.
jegyzet : A cikkben használt kód az MIT engedéllyel .
További információ a felhasználói élményről
A felhasználói élmény arra összpontosít, hogy egy termék megfelel -e a felhasználók igényeinek. Ha Ön tervező vagy fejlesztő, akkor jól teszi, ha követi az UX tervezési elveit, és fantasztikus termékeket hoz létre. Ha ez a terület érdekli Önt, a kezdéshez a helyes utat kell követnie.
mit tegyünk egy régi routerrelRészvény Részvény Csipog Email Szeretne UX tervező lenni? Az első lépések
Az UX Designer feladata, hogy megbizonyosodjon arról, hogy a szoftver felhasználói igényeit figyelembe veszik, és örülnek a folyamatnak.
Olvassa tovább Kapcsolódó témák- Programozás
- JavaScript
- jQuery
Yuvraj egy számítástechnikai egyetemi hallgató a Delhi Egyetemen, Indiában. Szenvedélyesen foglalkozik a Full Stack webfejlesztéssel. Amikor nem ír, a különböző technológiák mélységét kutatja.
Bővebben: Yuvraj ChandraIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide