<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Прокрутка страницы вверх

Прокрутка страницы вверх

У посетителя сайта, должна быть возможность, быстро вернуться наверх, если он дошел до конца страницы. Обычно в правом нижнем углу браузера, размещается кнопка со стрелочкой вверх. Пользователь нажимает на стрелочку и скрипт перебрасывает его наверх. Сделаем кнопку средствами CSS и запрограммируем её на jQuery.

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

Вставьте внизу HTML страницы тег button с классом scroll_top.

<button class="scroll_top"></button>

Приступим к стилизации этого тега. Нарисуем фигуру круга, внутри которого при помощи псевдоэлемента after, нарисуем стрелочку.

Как нарисовать стрелочку?

Представьте себе пустой квадрат с цветной обводкой сверху и слева, если его повернуть на 45 градусов, то обводка превратиться в стрелочку вверх.

/* основа кнопки вверх */
.scroll_top {
    position: fixed; /* фиксированное положение */
    bottom: -50px; /* расстояние от нижнего края */
    right: 20px; /* расстояние от правого края */
    width: 50px; /* ширина */
    height: 50px; /* высота */
    border: none; /* без рамки */
    border-radius: 50%; /* фигура круга */
    background: #ff0000;/* цвет фона */
    z-index: 100; /* поверх остальных элементов */
    outline: none; /* без внешней обводки */
    cursor: pointer;/* курсор рука */
    transition: 0.4s; /* плавное движение */
}


/* стрелочка внутри кнопки вверх */
.scroll_top:after {
    content: "";
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff; /* верхняя рамка */
    border-left: 2px solid #fff; /* левая рамка */
    transform: rotate(45deg); /* поворот */
    position: absolute; /* положение относительно круга */
    top: 7px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto; /* выравнивание по центру */
}

Программирование кнопки

Кнопка появилась, но при клике по ней ничего не происходит. Нам предстоит написать функцию со следующим алгоритмом действий.

1) Отлавливаем событие клик по кнопке с классом scroll_top.

2) Для тегов body/html делаем анимацию: Приказываем полосе прокрутки самой подняться наверх за 1 секунду.

$('.scroll_top').click(function(){
$('html, body').animate({scrollTop: 0}, 1000);
});

Только что написанная нами функция работает, но есть один недостаток. Пользователь сразу видит кнопочку вверх, как только попадает на сайт. Было бы неплохо, показывать ему кнопку, не на первом экране, а ниже, например через 300 пикселей от верха браузера.

Что нужно делать?


3) Спрятать кнопку, прописав отрицательное значение, вместо положительного, для свойства bottom.

bottom: -50px;
4) Создать активный класс, который должен сработать при заданных нами условиях: Показать кнопку.

/* кнопка появится */
.scroll_top.active {
    bottom: 20px;
}


5) Добавить новые действия в созданную ранее функцию.

Если окно браузера больше, чем 300 пикселей, то следует добавить элементу scroll_top активный класс, то есть перезаписать его нижнюю позицию (показать кнопку). В противном случае, удалить активный класс (спрятать кнопку).

$(window).scroll(function(){
    if($(window).scrollTop() > 300){
        $('.scroll_top').addClass('active');
    }
    else{
        $('.scroll_top').removeClass('active');
    }
});

Не забудьте подключить библиотеку jQuery.

Заключение

Если вы уже изучили HTML/CSS и не знаете куда двигаться дальше, то рекомендую вам пройти мой видео-курс, без умения программировать хотя бы на jQuery, вы будете вынуждены, отдавать часть заработка какому-нибудь программисту.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.