Kako ustvariti gumb 'Pomakni se na vrh' z uporabo JavaScript in jQuery

Gumb za pomikanje navzgor se uporablja za preprosto vrnitev pogleda na vrh strani. Ta majhna funkcija UX je zelo pogosta na sodobnih spletnih mestih. To je še posebej koristno za spletne strani, ki imajo veliko vsebine, kot so aplikacije na eni strani.

jabolčna ura serije 3 proti 6

V tem članku se boste naučili ustvariti gumb za pomikanje do vrha z uporabo JavaScript in jQuery.

---

---

Kako ustvariti gumb za pomikanje do vrha z uporabo JavaScripta

Spletnemu mestu lahko dodate gumb za pomikanje do vrha:

Koda HTML

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.

Tu je ustvarjena osnovna struktura spletne strani z lažnimi podatki. Osredotočiti se morate le na gumb za pomikanje navzgor.

---

---

Ko kliknete ta gumb, se stran pomakne na vrh. To bo delovalo po dodajanju kode jQuery.

Koda jQuery

Povezano: Naučite se ustvariti element v jQuery

// ===== 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');
});

Tukaj, pokazati razred se elementu gumba doda, če se uporabnik pomakne na več kot 300 slikovnih pik na spletni strani. To pokazati class naredi element gumba vidnim. Vidnost elementa gumba je privzeto skrita. Več podrobnosti o gumbu je v naslednji kodi CSS.

Koda CSS

Povezano: Preprosti primeri kode CSS, ki se jih lahko naučite v 10 minutah

#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;
}

Zgornji CSS se uporablja za oblikovanje gumba za pomikanje navzgor in spletne strani. Lahko se igrate s kodo CSS in oblikujete gumb glede na vaše zahteve.

Zdaj imate popolnoma funkcionalen gumb za pomikanje navzgor / nazaj na vrh. Če si želite ogledati celotno izvorno kodo, uporabljeno v tem članku, je tukaj Skladišče GitHub istega.

Opomba : Koda, uporabljena v tem članku, je Licencirano z MIT .

Več o uporabniški izkušnji

Uporabniška izkušnja se osredotoča na to, ali izdelek ustreza potrebam uporabnikov. Če ste oblikovalec ali razvijalec, bi bilo dobro, da sledite načelom oblikovanja UX in ustvarite čudovite izdelke. Če vas to področje zanima, morate za začetek slediti pravi poti.

kako povezati stikalo nintendo s televizorjem brez priklopne postaje

Deliti Deliti Cvrkutati E-naslov Želite biti UX oblikovalec? Tukaj je opisano, kako začeti

Naloga UX Designerja je, da poskrbi za potrebe uporabnikov programske opreme in da je pri tem navdušen.

Preberite Naprej Sorodne teme

• Programiranje
• JavaScript
• jQuery

O avtorju Yuvraj Chandra(Objavljenih 60 člankov)

Yuvraj je dodiplomski študent računalništva na Univerzi v Delhiju v Indiji. Navdušen je nad spletnim razvojem Full Stack. Ko ne piše, raziskuje globino različnih tehnologij.

Več od Yuvraja Chandre

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, če se želite naročiti