Меню
Оставить заявку

Кнопка вверх на jQuery

Кнопка вверх на jquery. Довольно частая задача при разработке сайта. Сегодня мы научимся делать кнопку вверх на jquery.

Сегодня мы с вами научимся делать кнопку вверх на jQuery.

html

Создадим кнопку с 2 классами, первый для оформления, другой для javascript и текстовый узел, который будет визуально обозначать начало страницы.

<p>Content</p>
<div class="up-btn js-scroll-top">Up</div>

css

накинем немного стилей

body {
    height: 4000px;
}

.up-btn {
    background-color: #444;
    color: #fff;
    padding: 20px;

    position: fixed;
    bottom: 20px;
    right: 20px;
    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transition: .3s all;
}

.up-btn.is-show {
    opacity: 1;
    visibility: visible;
}

Дали body огромную высоту, для того, чтобы скроллить, это только для примера.

Для кнопки сделали позиционирование внизу справа, по-умолчанию кнопка скрыта. Показывать ее будет дополнительный класс is-show, который мы будем добавлять в js.

javascript

Первое — клик и скроллинг вверх.

(1) Создаем событие клика по классу .js-scroll top
(2) У элемента html и body вызываем функцию. animate и
(3) Анимируем параметр scrollTop: 0
(4) за 1000 мс (1 сек)

Почему scrollTop должен быть 0? Потому, что это означает начало страницы.

$('.js-scroll-top').click(function() { // (1)
     $('html,body').animate({ // (2)
         scrollTop: 0 // (3)
     }, 1000); // (4)
 });

Показ, скрытие кнопки

Какие будут условия для показа и скрытия? Позиция скролла в текущий момент времени. Это мы можем проверить, привязав событие scroll на window — окно браузера.

$(window).scroll(function() {

});

Теперь при прокрутке мы должны получать позицию скролла. Это можно сделать с помощью метода. scrollTop ()

$(window).scrollTop()
if (Если расстояние сверху больше, чем 200 пикселей) {
    добавляем класс, который показывает кнопку
} else {
    удаляем класс, который показывает кнопку        
}
if ($(window).scrollTop() > 200) {
   $('.js-scroll-top').addClass('is-show');
} else {
   $('.js-scroll-top').removeClass('is-show');
}

Все вместе

$('.js-scroll-top').click(function() {
   $('html,body').animate({
       scrollTop: 0
    }, 1000);
});

$(window).scroll(function() {
   if ($(window).scrollTop() > 200) {
     $('.js-scroll-top').addClass('is-show');
   } else {
     $('.js-scroll-top').removeClass('is-show');
   }
});

Демо:

Кнопка вверх на jQuery 1

Sticky footer. Прилипающий футер

Разберем проблему с прилипающим футером.

Ссылка на codepen

Представим, что у на главной странице вашего сайта подвал внизу и все ок, но вот на странице контактов контента мало и подвал находится не внизу страницы, а посередине, как здесь:

Sticky footer. Прилипающий футер 2
Демо проблемы

Как-то я делал javascript реализацию подсчета высот и автоматическую подстройку, но постоянно возникали проблемы с отступами и я решил, что это необходимо сделать на css.

Решать проблему будем с помощью flex grid.

html

Для начала создадим html-код, тут нам понадобиться всего 2 элемента: content и footer. В content будет лежать шапка и контент сайта, отдельно будет футер.

<body>
   <div class="content">
      <p>I am content</p>
   </div>
   <div class="footer">
      <p>I am footer</p>
   </div>
</body>

CSS

body,html {
   height: 100%;
}

body {
   display: flex;
   flex-direction: column;
}

.content {
   flex: 1 0 auto;
}

.footer {
   flex-shrink: 0;
}

Здесь в несколько шагов:

Делаем body, html высоту в 100%, так как при отсутствии контента они не заполняют высоту экрана.

Для body установим flex и направление column, так как нам нужно, чтобы они выстроились в столбик.

Для content укажем flex: 1 0 auto, что дословно:

  • flex-grow: 1;
  • flex-shrink: 0;
  • flex-basis: auto

Нам нужно, чтобы он мог расширяться (grow), но нельзя, чтобы он изменял высоту меньше собственной (shrink), и размер автоматический (auto).

Подвалу мы запрещаем изменять высоту меньше собственной (shrink).

Готово, проверяем:

Sticky footer. Прилипающий футер 3
Демонстрация

sticky footer

Белая полоса справа на сайте. Решение

Белая полоса справа на сайте — частый и сложный вопрос, особенно для начинающих разработчиков.

Видеоурок

В чем проблема

Белая полоса может появляться по многим причинам, но если коротко, это «вывалившиеся» за сайт элементы, либо огромные отступы (margin) вправо.

Они могут быть скрыты, неочевидны, сразу можно не разобраться, что вылезает за границу сайта и создает эту белую полосу.

Пришлось повозится, чтобы создать эту ситуацию xD

Обычно пытаешься это решить, а вот создавать — впервые.

Демонстрация проблемы
Проблема

Итак, нашлась проблема — появилась белая полоса. Вы уже знаете, что это выпавшие за границу элементы сайта или их отступы.

Нам нужно их найти. Иногда, они видны сразу, как здесь:

Демонстрация проблемных блоков
Нашли проблемные блоки

Иногда, они не видны совсем, и по сайту сплошняком идет белая полоса, это уже сложнее. Я в таких случая просто удаляю по секции, и смотрю, после какой секции ситуация нормализуется.

Удаление секций

После того, как нашел секцию, в ней уже смотрю, какие элементы вызывают эту проблему, напишу несколько.

  • скрытые модальные окно или меню
  • flex или grid сетки
  • заголовки или подзаголовки

Посмотрим на моем примере, что я сделал не так и как исправить ситуацию в моем случае.

У меня 2 проблемы:

css код этого примера
css код этого примера
  1. У flex сетки нет свойства flex-wrap, которое отвечает за переброс элементов, в том случае, если места для них на экране нет
  2. Размер и формат заголовка, Заголовок длинный и без пробелов, нужно либо изменить его, либо уменьшить размер.

Исправим

Исправил заголовок — добавил пробелы.

html код заголовка
Изменил заголовок

Добавил flex-wrap: wrap;

css код
Добавил flex-wrap

Тестируем

Демонстрация исправленного сайта
проблема решена
Ранее ↓