Кнопка "Наверх" на jQuery
Вы наверняка на многих сайтах внизу видели такую кнопку, как "Наверх", или стрелочку, при нажатии которой вы плавно поднимались к началу страницы. Сегодня будем писать именно такую кнопку на языке JavaScript, с использованием библиотеки jQuery и нарисует простенькую кнопку на CSS.
Для начала создадим ссылку, которая будет отвечать за кнопку:
<a id="totop">Наверх</a>
Далее напишем простенький CSS код, чтобы наша кнопка хоть как-то выглядела:
#totop {
display: inline-block;
background-color: #ССС;
color: 1C1C1C;
width: 100px;
height: 50px;
text-align: center;
border-radius: 4px;
margin: 30px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s;
z-index: 1000;
}
#totop:hover {
cursor: pointer;
background-color: #BCBCBC;
}
У нас должна получится кнопка 100 пикселей в ширину и 50 пикселей в высоту, серого цвета с закруглёнными углами, а при наведении курсора на кнопку, она станет чуть темнее.
Теперь можно написать сам скрипт, который подбросит нас до потолка:
jQuery(document).ready(function() {
var btn = $('#totop');
$(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');
});
});
Как видите, всё очень просто! На этом всё.