» » Кнопка наверх - HTML+CSS+JQuery

Кнопка наверх - HTML+CSS+JQuery

Очень часто появляется необходимость сделать кнопку "наверх" на своем сайте, обычно это происходит когда страница становится очееееееень длинной, в данной статье мы рассмотрим несколько простых вещей:
  1. Как сделать появление кнопки наверх при скролле страницы
  2. Как при нажатии на эту кнопку сделать плавное перемещение вверх страницы

Ну и конечно же вас ожидает живой пример в codepen ;) Думаю можно откинуть лирику и приводить код, необходимый Вам

HTML:
<div class="top" title="Наверх"><i class="fa fa-angle-double-up"></i></div>
CSS:
.top{
  position: fixed;
    bottom: 25px;
    background-color: #E0E0E0;
    border-radius: 10em;
    color: #666;
    font-size: 26px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    transition: all .35s ease;
    right: -100px;
    z-index: 12;
    opacity: .5;
}

.top.active{
        right: 30px;
}
.top.active i{
  line-height: 0;
}
JQuery:
//событие нажатия на кнопку наверх для плавного скролла 
$('.top').click(function() {
  $('html, body').stop().animate({scrollTop: 0}, 'slow', 'swing');
});//появление и исчезновение кнопки при скролле страницы
$(window).scroll(function() {
  if ($(this).scrollTop() > $(window).height()) {
    $('.top').addClass("active");
  } else {
    $('.top').removeClass("active");
  };
});[/code]
CODEPEN:
16-04-2018, 21:50 538 0

Комментарии


Добавление комментария