<MyRusakov.ru />

Написание лайфхаков на Python

Написание лайфхаков на Python

Данный курс научит Вас автоматизировать самые разные задачи на языке Python, благодаря чему Вы сэкономите на рутине тысячи и тысячи часов своей жизни. Курс состоит из 20 примеров в различных областях: файлы и директории, медиа-файлы, Интернет, Web-мастеринг, Unreal Engine. Каждый пример упрощает ту или иную задачу в своей области, при этом каждый из них создаётся прямо на Ваших глазах и тщательно комментируется.

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

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

Как сделать кнопку "Наверх"

Как сделать кнопку

Наверняка, Вы часто встречали кнопку "Наверх". Иногда это кнопка, иногда ссылка, это не важно. Например, это кнопка есть вконтакте. И в этой статье я расскажу, как сделать кнопку "наверх".

Кнопка "наверх" позволяет быстро перейти к самому верху страницы. Есть различные способы её реализации, однако, есть, на мой взгляд, самый простой и удобный способ - через использование уникальных идентификаторов.

Давайте сразу приведу код, и Вы всё поймёте:

<div id="top"></div>
<!-- Много контента -->
<a href="#top">Наверх</a>

Соответственно, при клике по ссылке "Наверх" мы попадём на элемент с id="top", то есть тот самый div. Если его расположить сразу после body, то это и будет самый верх страницы. Как видите, всё очень просто.

Есть ещё один способ, он ещё проще этого, однако, здесь требуется использование JavaScript. Вот код:

<a href="javascript:scroll(0,0);">Наверх</a>

Снова при клике мы попадём на самый верх страницы, но здесь уже не нужно добавлять пустые блоки с нужным id. То есть код получается короче, но недостаток - это использование JavaScript.

Классическим и более надёжным является именно первый способ, зато более короткий - второй способ. Какой именно способ использовать для создания кнопки "наверх", выбирать Вам.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

RussianPro RussianPro 11.02.2012 10:00:13

Зачем создавать ещё один блок чтобы перейти наверх??? Не проще ли сделать так <a href = "#">Наверх</a> и всё.

Ответить

Admin Admin 11.02.2012 13:33:49

Действительно, можно и так. Не использовал такой способ, но теперь буду знать. Спасибо!

Ответить

RussianPro RussianPro 11.02.2012 13:45:36

А как на javascript сделать плавный переход наверх и чтобы при нахождении вверху странички кнопка исчезала?

Ответить

Admin Admin 11.02.2012 13:46:50

Для этого лучше использовать JQuery. Есть специальные плагины для этого.

Ответить

sync.o sync.o 11.02.2012 14:19:30

Кстати, кнопка "наверх" как правило появляется только если прокрутить окно вниз. А на самом "верху" ее не должно быть видно, логично? Интересно, какое событие отвечает за ее появление?

Ответить

Admin Admin 11.02.2012 14:38:16

Это событие называется scroll, обработчик onscroll, применяется к body.

Ответить

sync.o sync.o 11.02.2012 22:23:50

А если чуть сложнее: если пользователь прокрутит страничку вниз на заданное число пикселей?

Ответить

Admin Admin 11.02.2012 22:35:19

Так для этого и используется onscroll. Ставьте функцию в обработчике и проверяйте каждый раз значение такого выражения: self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);

Ответить

sync.o sync.o 12.02.2012 13:56:27

Супер! То, что надо, спасибо.

Ответить

sync.o sync.o 13.02.2012 00:07:55

Кстати, на тему скроллинга. Всегда интересно было, как реализовать подгрузку изображений аяксом в момент, когда они попадают во "viewport". Т.е. как заставить картинки грузится лишь тогда, когда юзер прокручивает экран вниз, и они попадают в его поле зрения...

Ответить

Admin Admin 13.02.2012 00:16:07

Примерно так. Вместо изображений создаются пустые блоки. Затем проверяется, находится ли данный блок в поле видимости окна. Если да, то этот блок заменяется (либо вставляется внутрь) на изображение, опять же через JavaScript (объект Image). При замене на изображение и начнётся его загрузка.

Ответить

sync.o sync.o 13.02.2012 12:20:35

алгоритм ясен. поймать же момент, когда изображение попадает в поле зрения я попытался, проверяя по событию scroll это условие: (document.body.scrollTop + screen.availHeight) > myImage.offsetTop)

Ответить

mmp261241 mmp261241 18.02.2012 23:34:40

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

Ответить

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