Home-theater-designers
Дугме „помери се до врха“ се користи за лако враћање погледа на врх странице. Ова мала УКС функција је врло честа на модерним веб страницама. Посебно је корисно за веб странице које имају пуно садржаја, попут апликација на једној страници.
како убрзати трчање пс4
У овом чланку ћете научити како да креирате дугме за померање до врха користећи ЈаваСцрипт и јКуери.
Како да креирате дугме за померање до врха помоћу ЈаваСцрипт-а
Својој веб локацији можете додати дугме за померање до врха помоћу следећег исечка кода:
ХТМЛ код
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.
Овде се ствара основна структура веб странице са лажним подацима. Потребно је само да се фокусирате на дугме за померање до врха.
Када се притисне ово дугме, страница се помера до врха. Ово ће бити функционално након додавања јКуери кода.
јКуери Цоде
Повезан: Научите како да креирате елемент у јКуери -ју
// ===== 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');
});Овде, Прикажи класа се додаје елементу дугмета ако корисник листа више од 300 пиксела на веб страници. Ово Прикажи цласс чини елемент дугмета видљивим. Подразумевано је видљивост елемента дугмета скривена. Више детаља о дугмету налази се у следећем ЦСС коду.
ЦСС код
Повезан: Једноставни примери ЦСС кода које можете научити за 10 минута
#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;
}Горе наведени ЦСС се користи за обликовање дугмета за померање до врха и веб странице. Можете се играти са ЦСС кодом и обликовати дугме према вашим захтевима.
Сада имате потпуно функционално дугме за померање до врха / назад до врха. Ако желите да погледате комплетан изворни код коришћен у овом чланку, ево ГитХуб спремиште истог.
Белешка : Код који се користи у овом чланку је МИТ Лиценсед .
Сазнајте више о корисничком искуству
Корисничко искуство се фокусира на то да ли производ задовољава потребе својих корисника. Ако сте дизајнер или програмер, било би добро да следите принципе УКС дизајна и створите сјајне производе. Ако вас ово поље занима, морате да кренете исправним путем да бисте започели.
можете ли снимити телефонски позив са екранаОбјави Објави Твеет Емаил Желите да будете УКС дизајнер? Ево како започети
Посао УКС Десигнер -а је да се побрине за потребе корисника софтвера и да је одушевљен тим процесом.
Прочитајте следеће Повезане теме- Програмирање
- ЈаваСцрипт
- јКуери
Иуврај је студент основних студија рачунарства на Универзитету у Делхију у Индији. Он је страствен за Фулл Стацк Веб Девелопмент. Кад не пише, истражује дубину различитих технологија.
Још од Иуврај ЦхандраПретплатите се на наш билтен
Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!
Кликните овде да бисте се претплатили