<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

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

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

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

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

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

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

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

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

Как сделать плавный якорь на jQuery

Как сделать плавный якорь на jQuery

Сегодня мы поговорим о том, что такое якорь в HTML, как это работает, да так, чтобы действие произошло плавно. Якорь – это знак решетки, который применяется к тегу ссылки a. В основном его используют на страницах с большим объемом контента для быстрого перехода от ссылки меню навигации к конкретному разделу на странице.

Пользователь кликает по ссылке

<a href="#services">Услуги</a>

и сразу попадает в нужное место на той же странице.

<section id="services">попадает сюда</section>
  • #services – это якорь
  • id="services" – место в документе, куда перебрасывает пользователя

Эта конструкция работает обязательно в связке. Для примера создадим HTML-страницу с якорными ссылками меню навигации и секциями.

<header class="header" id="header">
  <nav class="nav" id="nav">
    <a href="#about">О нас</a>
    <a href="#services">Услуги</a>
    <a href="#blog">Блог</a>
    <a href="#works">Наши работы</a>
    <a href="#contact">Контакты</a>
  </nav>
</header>
<section id="about">
  <h1>О нас</h1>
  <p> текст в параграфе </p>
</section>
<section id="services">
  <h1>Услуги</h1>
  <p>текст в параграфе</p>
</section>
<section id="blog">
  <h1>Блог</h1>
  <p> текст в параграфе</p>
</section>
<section id="works">
  <h1>Наши работы</h1>
  <p>текст в параграфе </p>
</section>
<section id="contact">
  <h1>Контакты</h1>
  <p> текст в параграфе </p>
</section>

CSS код

/* обнуление полей и отступов */
* {
    margin: 0;
    padding: 0;
}
/* размер шрифта для заголовков */
h1 {
    font-size: 20px;
}
/* панель навигации */
.header {
    padding: 20px 0;
    width: 100%;
    background-color: #eb8b8d;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* ссылки меню */
a {
    display: inline-block;
    margin: 0 15px;
    position: relative;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
}
/* отступы для секций */
section{     padding: 70px; /* поля вокруг секций */
}

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

Плавный якорь на jQuery

Плавность достигается за счет добавления JavaScript кода, но мы воспользуемся библиотекой jQuery, как облегченным вариантом написания кода.

$('a[href^="#"]').click(function(){ // #1
let anchor = $(this).attr('href'); // #2
$('html, body').animate({ // #3
scrollTop: $(anchor).offset().top // #4
}, 600); // #5
});

Комментарии кода

#1) Получаем все ссылки, у которых атрибут href начинается с решетки. При клике по этим ссылкам, будут последовательно выполняться действия, внутри функции.
#2) Создаем переменную anchor(произвольное название) и присваиваем ей значение атрибута href (#about, #services, #blog, #works, #contact).
#3) Внутри тегов html и body, произойдет анимация, дальше опишем её.
#4) Устанавливает текущее положение значений переменной anchor с отступом относительно верха при прокрутке страницы сверху вниз.
#5) Время, в течении которого произойдет анимация.

На живом примере, вы можете увидеть, как при клике на ссылку, вас плавно перебрасывает в нужное место страницы.

Заключение

Для полноценной разработки сайтов, одних только знаний HTML/CSS, недостаточно. Необходимо уметь управлять элементами страницы с помощью JavaScript, могу посоветовать вам этот видео-курс.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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