Paano Lumikha ng isang 'Scroll-to-Top' Button Gamit ang JavaScript at jQuery

Ginagamit ang isang pindutan na 'scroll-to-top' upang maibalik ang iyong pagtingin sa tuktok ng pahina nang madali. Ang maliit na tampok na UX na ito ay napaka-pangkaraniwan sa mga modernong website. Partikular na kapaki-pakinabang ito para sa mga web page na maraming nilalaman, tulad ng mga solong pahina na application.

maaari mo bang i-refund ang mga laro sa ps4

Sa artikulong ito, malalaman mo kung paano lumikha ng isang scroll-to-top button gamit ang JavaScript at jQuery.

Paano Lumikha ng isang Scroll-to-Top Button Gamit ang JavaScript

Maaari kang magdagdag ng isang pindutan ng scroll-to-top sa iyong website gamit ang sumusunod na code snippet:

HTML Code

  
  
  
  
 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.

Dito, isang pangunahing istraktura ng webpage ay nilikha gamit ang dummy data. Kailangan mo lamang mag-focus sa scroll-to-top button.

Kapag na-click ang pindutan na ito, ang pahina ay na-scroll sa itaas. Magagamit ito pagkatapos maidagdag ang jQuery code.

jQuery Code

Kaugnay: Alamin Kung Paano Lumikha ng isang Elemento sa 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');  
});

Narito, ang ipakita idinagdag ang klase sa elemento ng pindutan kung mag-scroll ang gumagamit ng higit sa 300 mga pixel sa web page. Ito ipakita Ginagawa ng klase na makita ang elemento ng pindutan. Bilang default, ang kakayahang makita ng elemento ng pindutan ay pinananatiling nakatago. Ang higit pang mga detalye tungkol sa pindutan ay nasa sumusunod na CSS code.

CSS Code

Kaugnay: Mga Simpleng Halimbawa ng CSS Code na Maaari Mong Malaman sa loob ng 10 Minuto

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

Ginamit ang CSS sa itaas upang i-istilo ang scroll-to-top button at ang web page. Maaari mong i-play sa CSS code at i-istilo ang pindutan ayon sa iyong mga kinakailangan.

Ngayon mayroon kang isang ganap na gumaganang pindutan ng scroll-to-top / back-to-top. Kung nais mong tingnan ang kumpletong source code na ginamit sa artikulong ito, narito ang Repository ng GitHub ng pareho

Tandaan : Ang code na ginamit sa artikulong ito ay Lisensyado ang MIT .

Matuto Nang Higit Pa Tungkol sa Karanasan ng Gumagamit

Nakatuon ang karanasan ng gumagamit kung natutugunan ng isang produkto ang mga pangangailangan ng mga gumagamit nito. Kung ikaw ay isang taga-disenyo o isang developer, makabubuting sundin mo ang mga prinsipyo ng disenyo ng UX at lumikha ng mga magagandang produkto. Kung interesado ka sa larangang ito, dapat mong sundin ang tamang landas upang makapagsimula.

kung paano i-off ang laptop screen

Magbahagi Magbahagi Mag-tweet Email Nais Na Maging isang UX Designer? Narito Kung Paano Magsimula

Trabaho ng UX Designer upang matiyak na ang mga pangangailangan ng gumagamit ng software ay alagaan, at natutuwa sila sa proseso.

Basahin Susunod Mga Kaugnay na Paksa

Programming
JavaScript
jQuery

Tungkol sa May-akda Yuvraj Chandra(60 Mga Artikulo Na-publish)

Si Yuvraj ay isang undergraduate na mag-aaral sa Computer Science sa University of Delhi, India. Masigasig siya sa Full Stack Web Development. Kapag hindi siya nagsusulat, sinisiyasat niya ang lalim ng iba't ibang mga teknolohiya.

Higit pa Mula kay Yuvraj Chandra

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe