Как сделать кнопку наверх в html
Добавил пользователь Владимир З. Обновлено: 05.10.2024
Создание кнопки, как и любого активного элемента на веб-странице, делится на три основные части. Необходимо написать html код самой кнопки, навести марафет с помощью css стилей и оживить кнопку с помощью js кода. О каждом этапе в подробностях, поехали!
Начать логичнее всего непосредственно с самой кнопки. Существует огромное количество вариантов, но я расскажу о самом визуально красивом способе нарисовать стрелочку на веб-странице — с помощью набора иконок Font Awesome.
Установка Font Awesome заключается в распаковке набора иконок и css стилей в файловую систему своего сайта. Скачиваем набор на официальном сайте , кстати, там же находится подробная инструкция по внедрению иконок на сайт. Открываем свой файловый менеджер и грузим распакованную папку с иконками на сайт. На момент написания инструкции — font-awesome-4.7.0. Соответственно в моем случае иконки стали доступны по адресу
В коде страницы кнопка появилась, но до тех пор, пока мы не подключим Font Awesome и не наведем красоту на саму кнопку, никто ее не увидит. Подключить иконки можно строкой.
Но если сайт работает на WordPress, то лучше сделать по уму и зайти в functions.php темы, найти там строку add_action( ‘wp_enqueue_scripts’, ‘mindhalls_scripts’ ); вторым аргументом является название функции(в том же файле), в которую нужно дописать вот такой код.
Где часть /inc/font-awesome-4.7.0/css/font-awesome.min.css нужно заменить на ваш путь до файла. В этот самый момент WordPress нас поймет и подключит иконки в хедер автоматически.
Кроме иконок, нужно настроить расположение, размер и прочие характеристики кнопки. Дописываем правила для класса scrollup в основной файл css стилей вашего сайта. В случае сайта на WordPress это style.css.
При такой настройке кнопка появится в правом нижнем углу и будет размером 60x60px(потому что наша стрелочка это символ, соответственно ее размер меняется правилом font-size). Например, для того, чтобы переместить кнопку в левую нижнюю часть экрана, нужно поменять правило right: на left: .
Пришло время оживить кнопку. Она будет исчезать, когда экран пользователя прокручен до верха страницы, и появляться в противном случае. Кроме того, наделим нажатие на нее способностью возвращать экран на самый верх страницы сайта. Создаем новый js файл и пишем туда инструкции.
Осталось подключить этот js файл на все страницы сайта. Сделать это можно все в той же функции, где мы подключали иконки, дописав туда такую строку.
Где /js/scroll-to-top.js нужно поменять на путь до вашего js файла.
Заключение
После этих несложных манипуляций у вас на сайте появится заветная кнопка. Внимание! Самое главное — не забывайте менять пути из приведенного кода на свои, и тогда у вас точно не возникнет проблем с установкой. На этом у меня все, спасибо за внимание!
Повысить удобство работы вашего сайта можно с помощью особой кнопки в виде стрелки вверх, которая появляется тогда, когда пользователь начинает прокручивать страницу вниз. При нажатии на такую кнопку страница плавно прокручивается вверх.
Посмотреть живое демо можно здесь.
Для создания такой кнопки нужно подредактировать файлы HTML, CSS и JavaScript вашего сайта.
Добавьте ссылку куда-нибудь в нижнюю часть HTML кода страницы сайта, например, в футер перед закрывающем тегом
Наверняка, Вы часто встречали кнопку "Наверх". Иногда это кнопка, иногда ссылка, это не важно. Например, это кнопка есть вконтакте. И в этой статье я расскажу, как сделать кнопку "наверх".
Кнопка "наверх" позволяет быстро перейти к самому верху страницы. Есть различные способы её реализации, однако, есть, на мой взгляд, самый простой и удобный способ - через использование уникальных идентификаторов.
Давайте сразу приведу код, и Вы всё поймёте:
Соответственно, при клике по ссылке "Наверх" мы попадём на элемент с id="top", то есть тот самый div. Если его расположить сразу после body, то это и будет самый верх страницы. Как видите, всё очень просто.
Есть ещё один способ, он ещё проще этого, однако, здесь требуется использование JavaScript. Вот код:
Снова при клике мы попадём на самый верх страницы, но здесь уже не нужно добавлять пустые блоки с нужным id. То есть код получается короче, но недостаток - это использование JavaScript.
Классическим и более надёжным является именно первый способ, зато более короткий - второй способ. Какой именно способ использовать для создания кнопки "наверх", выбирать Вам.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 13 ):
Зачем создавать ещё один блок чтобы перейти наверх. Не проще ли сделать так Наверх и всё.
Действительно, можно и так. Не использовал такой способ, но теперь буду знать. Спасибо!
А как на javascript сделать плавный переход наверх и чтобы при нахождении вверху странички кнопка исчезала?
Для этого лучше использовать JQuery. Есть специальные плагины для этого.
Кстати, кнопка "наверх" как правило появляется только если прокрутить окно вниз. А на самом "верху" ее не должно быть видно, логично? Интересно, какое событие отвечает за ее появление?
Это событие называется scroll, обработчик onscroll, применяется к body.
А если чуть сложнее: если пользователь прокрутит страничку вниз на заданное число пикселей?
Так для этого и используется onscroll. Ставьте функцию в обработчике и проверяйте каждый раз значение такого выражения: self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
Супер! То, что надо, спасибо.
Кстати, на тему скроллинга. Всегда интересно было, как реализовать подгрузку изображений аяксом в момент, когда они попадают во "viewport". Т.е. как заставить картинки грузится лишь тогда, когда юзер прокручивает экран вниз, и они попадают в его поле зрения.
Примерно так. Вместо изображений создаются пустые блоки. Затем проверяется, находится ли данный блок в поле видимости окна. Если да, то этот блок заменяется (либо вставляется внутрь) на изображение, опять же через JavaScript (объект Image). При замене на изображение и начнётся его загрузка.
алгоритм ясен. поймать же момент, когда изображение попадает в поле зрения я попытался, проверяя по событию scroll это условие: (document.body.scrollTop + screen.availHeight) > myImage.offsetTop)
Михаил и Никита, спасибо Вам обоим. Получилось двумя способами с первого раза, а мучилась уже целый год, не знала, как это сделать.
Преимущество этой кнопки заключается в том, что она может работать на планшетах и смартфонах, и в любых других случаях, когда у вас нет под рукой клавиатуры. К тому же, не все пользователи могут знать о полезной функции клавиши Home, а кнопка на сайте всегда видна, по ней сразу видно, для чего она предназначена. Второй плюс – эту кнопку можно усовершенствовать и сделать так, чтобы она возвращала пользователя к тому месту страницы, откуда он поднялся наверх. Именно этот вариант кнопки мы будем сегодня делать. Вы можете просмотреть демо, а также скачать файл с примером на свой компьютер.
Шаг 1. CSS
Та часть CSS, которая касается стиля кнопки, выглядит следующим образом:
Шаг 2. JavaScript
Следующий шаг – код JavaScript. Для удобства внутри добавлены комментарии с пояснениями:
Шаг 3. HTML
Осталось дело за малым – создать кнопку в HTML:
Вот и всё, простая, но очень удобная кнопка Наверх для сайта с функцией возврата готова. Вы можете настроить ее стиль самостоятельно, который будет подходить под ваш сайт.
Читайте также: