Как добавить кнопку «наверх» на сайте

Содержание

Кнопка вверх для сайта — более 7 проверенных решений

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

CSS код:

Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше всего добавить в файл стилей вашего сайта.

#toTop { width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; position:fixed; bottom:10px; /* отступ кнопки от нижнего края страницы*/ right:10px; cursor:pointer; display:none; color:#333; font-family:verdana; font-size:11px;
}

HTML код:

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

^ Наверх

3. UItoTop JQuery плагин

Простой плагин делающий плавное появление кнопки и плавный скроллинг вверх при нажатии на ее. Чтобы задействовать плагин на своем сайте нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить все необходимые файлы плагина и он будет работать.

Исходники

В представленном архиве находится 3 папки: css — файл стилей кнопки, img — изображение и папка js в которой находятся 4 JavaScript файла.

Подключение JavaScript файлов:

Распакуйте скачанный архив с исходниками в какую либо папку вашего сайта. Для задействования плагина нам достаточно подключить три из имеющихся js файлов. Для их подключения перед закрывающим тегом добавьте следующие пути к файлам:

Обратите внимание

Пути ведущие к файлам исправьте в соответствии с тем в каком каталоге располагаются файлы плагина.

Обратите внимание, если ранее вы уже подключили к своему сайту библиотеку jQuery, то добавлять следующий код не нужно:

Добавление CSS:

Следующий шаг это добавление CSS стилей, без них кнопка не заработает. Подключить их можно двумя способами.

Первый способ это добавить на все страницы вашего сайта между тегами ссылку на CSS файл стилей:

Не забудьте только изменить путь к файлу.

Второй способ это скопировать все содержимое файла ui.totop.css и вставить его в файл CSS стилей вашего сайта. Второй способ будет более рациональным так как не требует подключения лишних файлов.

4. Кнопки прокрутки вверх и вниз на JQUERY

Данное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают. Этот эффект вы можете увидеть просмотрев демо.

Исходники

Название: Кнопки прокрутки вверх и вниз на JQUERY
Ссылка: scroll.zip57.72 KB
Формат: ZIP архив

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

Подключить HTML:

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

Подключение JavaScript:

Сразу после HTML кода, перед тегом разместите код вызова необходимых JavaScript файлов и JQuery код.

Пути ведущие к JS файлам необходимо заменить на свои.

Важно

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

Далее следует подключение еще одного JS файла и код содержащий определенные функции, которые необходимо рассмотреть подробнее. Потому как про помощи их можно изменять некоторые параметры работы кнопок. Ниже приведен код с разъяснениями:

Подключение CSS:

Для того, чтобы добавить CSS просто подключите к страницам сайта файл style.css, находящийся в архиве с исходниками:

А самым лучшим вариантом будет скопировать стили этого файла и вставить их в файл стилей своего сайта.

5. Кнопка плавной прокрутки вверх при помощи JQuery

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

Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.

Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Изображение:

Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это: icon_top.png

HTML код:

Для вызова кнопки после основного контента страницы или перед тегом разместите следующий HTML код:

Наверх

CSS стили:

.scrollup{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url(‘icon_top.png’) no-repeat;
}

При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.

JQuery:

Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами ? вставляем следующее:

Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:

Совет

Первый ScrollTop — определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.

Как вы видите есть еще два параметра — 0 — значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 — это скорость анимации в миллисекундах.

6. Анимированная кнопка перехода вверх

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

Для создания кнопки используется изображение стрелки, CSS стили и JQuery.

Изображение:

Изображение стрелки использующееся для кнопки можете взять здесь: up-arrow.png

HTML код:

Для вызова кнопки используется следующий HTML код:

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

И еще один важный момент, касающийся HTML кода. Тегу вы должны присвоить идентификатор top.

В случае если тегу уже присвоен определенный id, тогда в коде вызова кнопки, размещенном чуть выше, #top нужно заменить на #ваш-id

CSS код:

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

#back-top { position: fixed; bottom: 30px; margin-left: -150px;
} #back-top a { width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; color: #bbb; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;
}
#back-top a:hover { color: #000;
} /* arrow icon (span tag) */
#back-top span { width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url(up-arrow.png) no-repeat center center; /* rounded corners */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; transition: 1s;
}
#back-top a:hover span { background-color: #777;
}

JQuery код:

Первая строчка — это подключение библиотеки, если к вашему сайту она уже подключена значит опускаем ее. Весь код помещаем между тегами .

Расширения для Joomla и плагины для WordPress позволяющие создавать кнопку «Наверх».

На мой взгляд на любой CMS лучше всего использовать одно из представленных выше решений, но если вы не знаете как подключить приведенные скрипты к своему сайту на Joomla или WordPress, то можете воспользоваться следующими готовыми, бесплатными расширениями и плагинами.

Расширения для Joomla:

Scroll to Top: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/24769

Skyline Scroll to Top: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/19772

Обратите внимание

Top of the Page: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/16807

Плагины для WordPress:

Найти самые популярные плагины для создания такого функционала вы сможете по ссылке: http://wordpress.org/plugins/tags/scroll-to-top

Материал подготовлен проектом: WebMasterMix.ru

Рекомендуем ознакомиться:

Подробности

Делаем кнопку “Наверх” для сайта без плагинов

вашего сайта следующую строку:

2. Подключение скрипта, выводящего кнопку

Код скрипта можно вставить двумя способами:

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

Первый вариант проще, второй, на мой взгляд, удобнее.

Вот сам скрипт (автор Тимур Камаев wp-kama.ru):

123456789101112131415161718192021222324

Замените в скрипте ссылку https://biznessystem.ru/img/arrow.png на ту, где будет храниться ваша картинка.

Если вы будете использовать для скрипта отдельный файл, как это сделал я, то в него помещаете код, находящийся между тегами , сами теги копировать в файл не нужно. Файл размещаете у себя на хостинге.

Я назвал файл buttonup.js. Для его подключения в заголовке сайта прописываем вот такую строчку:

Вместо «путь к файлу» прописываете адрес, где лежит ваш файл со скриптом.

Картинка для кнопки

Для того, чтобы изображение кнопки менялось, файл картинки должен состоять из двух половинок, на одной изображается обычная стрелка, на другой активная стрелка (под наведенным курсором). Посетителю одновременно показывается только одна половина. У меня верхняя стрелка сделана полупрозрачной, вторая непрозрачная (яркая).

Заданные цифры приведены для картинки размером 88 на 250 пикселей (каждая стрелка сделана по 125 пикселей в высоту). Если вы будете использовать другое изображение, то изменяете в коде значения width и height на свои.

Значение background-position – это смещение картинки, его делаете чуть больше половины всей высоты изображения.

Bottom – это отступ от нижнего края экрана. Left – отступ от левого края экрана, здесь он задан в процентах, а можно задать в пикселях, как это было в примере с HTML. Там параметр right (отступ справа) был задан в пикселях.

Код можно упростить, если удалить из него вот эту строку:

+ ‘.scrollTop:hover{ background-position:0 -133px;}’

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

Несколько вариантов стрелок я сделал, а в интернете вы можете отыскать много готовых.

Как видите, создать красивый сайт самому несложно. На этом на сегодня все.

Кнопка вверх для сайта

Доброго времени суток! Сейчас рассмотрим такую вещь, которая касается юзабилити вашего сайта – кнопка вверх для сайта. Для тех, кто не знает, что такое юзабилити сайта вкратце поясню — юзабилити сайта обозначает на сколько удобен, логичен и прост интерфейс сайта для пользователя.

Содержание:

Для чего нужна кнопка наверх

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

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

Ну это были лирические отступления, теперь приступим к делу.

Кнопка наверх для сайта может ставиться на сайт разными способами. Мы рассмотрим только некоторые из них.

Кнопка вверх для сайта WordPress, с помощью плагина WPFront Scroll Top

Расскажу немного о плагине WPFront Scroll Top и что он из себя представляет. Плагин WPFront Scroll Top довольно удобен в использовании, в нем минимум необходимых настроек. Также есть возможность выбрать – кнопка должна быть с картинкой или просто в виде текста. И такая немаловажная вещь, как использование собственной картинки, что не может не радовать.

Для начала устанавливаем плагин WPFront Scroll Top. Для этого заходим в админку сайта, в меню выбираем Плагины, в нем выбираем Добавить новый. На открывшейся странице в строку для поиска плагинов вводим название плагина WPFront Scroll Top и устанавливаем его. После установки не забываем его активировать.

После установки и активации в главном меню админки появится пункт WPfront. Наводим на него мышь и в появившемся подменю выбираем пункт Scroll Top.

Важно

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

Остальные настройки можно оставить по-умолчанию.

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

Кнопка вверх на сайт, с использованием скрипта на JQuery

Для тех, кому важна каждая миллисекунда при загрузке сайта или просто вы уже запутались в куче установленных плагинов и не хотите ставить еще больше, то вам подойдет этот способ, но он более трудоемкий и менее гибок в настройке. Этот способ будет состоять из трех шагов.

На первом шаге мы сформируем HTML кнопки наверх, далее оформим его внешний вид, с помощью таблицы стилей CSS и за само действие, которое будет совершать кнопка, у нас будет отвечать javascript. Итак, давайте приступим.

Кнопка наверх для сайта HTML код

Сама кнопка будет представлять из себя обычную ссылку. Она у нас будет пустая. Вот собственно и весь HTML-код:

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

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

Выбираем шаблон с именем Подвал (footer.php), проматываем весь код, находим закрывающийся тег и перед ним вставляем сей код. После всех внесенных правок не забываем нажимать кнопку Обновить файл.

Рисунок прилагается.

Также можно добавить эту ссылку, с помощью сценария Javascript:

jQuery(‘body’).prepend(”);

Код нужно добавить перед закрывающимся тегом , иначе он работать не будет.

Можно его подключить в отдельном файле javascript или добавить в конец существующего и тогда вообще не придется лезть в HTML-код.

Кнопка вверх для сайта CSS код

На этом шаге нужно сформировать CSS-код. Необходимо в нем указать, что кнопка будет занимать фиксированную позицию, задать ей ширину и высоту, а также цвет фона и картинку.

Вот как выглядит, собственно, CSS-код:

background: #27AE61 url(«images/up-arrow.png») no-repeat center 43%;-webkit-border-radius: 30px;-moz-border-radius: 30px;

Берем код и копируем в ваш основной файл с таблицами стилей, желательно в конец.

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

Давайте теперь пройдемся по настройкам:

Width и height – это ширина и высота кнопки. Тут все понятно, дополнительных пояснений, думаю, не требуется.

Right и bottom – это параметры для того, чтобы указать насколько пикселей кнопка будет отодвинута от правого нижнего края сайта справа и снизу соответственно. С помощью этих параметров также можно переместить кнопку в левую сторону. На некоторых сайтах кнопку делают и с левой стороны, но мне больше нравиться традиционный вариант справа.

Для того чтобы переместить кнопку вверх на левую сторону сайта требуется просто поменять параметр right на left. И тогда пиксели будут отсчитываться от левой стороны. Ничего сложного – все очень просто!

Background. Первый параметр определяет цвет фона кнопки, второй картинку. Обратите внимание что путь до картинки относительный.

Это значит, что он будет отчитываться относительно файла css, в котором указан параметр background.

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

Если вы хотите, чтобы у кнопки не было фоновой заливки, достаточно просто убрать первый параметр.

Border-radius округляет углы квадратного элемента. В данном примере с указанными параметрами у нас получится круглая кнопка. Если поставить border-radius в 0, то кнопка получится квадратной. Это понадобится сделать, если вы захотите поставить квадратную картинку.

Кнопка «Наверх» на чистом JavaScript | Александр Казаков

Создаем кнопку на нативном JavaScript, без jQuery. Создаем улучшенную кнопку, действующую как вверх, так и вниз.

Вначале разметка.
Добавляем в HTML тег a, задаем ему класс и заглавие(title). Содержимое тега будет спецсимвол ↑ он как раз и будет отображаться в виде стрелки. Важно заметить, что здесь у тега a нет атрибута href, т.к. он нам здесь не нужен.

↑

Пишем стили.
В будущем вы сможете изменить внешний вид кнопки, сейчас сделаем «базовую» модель. Записываем в CSS представленный код, он стандартный, отмечу только класс back_to_top-show, мы будем его добавлять/убирать у нашей кнопке средствами javascript.

Совет

В начале(после загрузки страницы) у кнопки стоит класс back_to_top и соответственно display:none; т.е.

кнопка не отображается, когда мы добавим кнопке класс back_to_top-show то display станет block и кнопка появится на экране.

.back_to_top { position: fixed; bottom: 80px; right: 40px; z-index: 9999; width: 30px; height: 30px; text-align: center; line-height: 30px; background: #f5f5f5; color: #444; cursor: pointer; border-radius: 2px; display: none;
} .back_to_top:hover { background: #e9ebec;
} .back_to_top-show { display: block;
}

Теперь JavaScript.
Мы создадим два обработчика:

scroll, зарегистрируем его на window. Он будет отслеживать прокрутку документа(т.е. страницы) и в зависимости от нее будет добавлять/удалять нашей кнопке класс back_to_top-show.
click, зарегистрируем его на саму кнопку. Он будет отслеживать нажатие на кнопку и приводить в действие скролл «наверх».

var goTopBtn = document.querySelector(‘.back_to_top’); window.addEventListener(‘scroll’, trackScroll);
goTopBtn.addEventListener(‘click’, backToTop);

Вначале отслеживаем прокрутку документа.
Мы задаем два условия(if) и в зависимости от срабатывания одного из них, мы нашей кнопке добавляем/удаляем класс back_to_top-show, а следовательно делаем ее «видимой»/»невидимой». Когда мы прокручиваем документ на «один экран», кнопка появляется, и наоборот.

Теперь отслеживаем клик по кнопке.
Логично предположить, что мы можем совершить клик по кнопке только тогда, когда обработчик scrollотработал и показал ее нам. Задача здесь в добавлении анимации(плавный скролл наверх).

Я решил эту задачу с помощью метода setTimeout и рекурсии(т.е. функция вызывает сама себя). За каждый такой вызов функции, мы будем прокручивать страницу вверх, в коде значение -80 это и есть параметр прокрутки документа за один «шаг»(вызов функции).

Чтобы понять как это действует, нужно понимать как действует рекурсия и метод setTimeout, еще можно попробовать изменить значение -80 и второй параметр в setTimeout т.

е в данном случае он равен нулю, в зависимости от этих параметров мы можем делать прокрутку быстрее/медленнее.

function backToTop() { if (window.pageYOffset > 0) { window.scrollBy(0, -80); setTimeout(backToTop, 0); } }

Готово!
Теперь соберем все воедино, переведем наш код в «строгий режим» путем добавления ‘use strict’; и обернем его в анонимную функцию, это нужно чтобы наши переменные не попали в глобальную область видимости( т.е. чтобы не было конфликта с другими нашими скриптами).

Кнопка «Наверх» на чистом JavaScript. Как оказалось, её несложно сделать и без jQuery. Я приведу воспроизводимый код на Codepen, вы сможете еще раз все проверить и посмотреть в действии(в codepen добавлен еще один скрипт генерирующий цифры, он нужен для более наглядной демонстрации скролла, вам нужен только код отмеченный комментариями, на другой не обращайте внимания).

Обратите внимание

Вы также можете оставить свои комментарии здесь, или на StackOverflow_ru , где я выложил данный код на «инспекцию», а также задал свои дополнительные вопросы.

Простая кнопка Наверх с функцией возврата – JavaScript

Karina | 09.10.2014

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

, хочет вернуться к началу страницы, он либо долго скроллит (что не очень удобно), либо нажимает клавишу Home на клавиатуре, либо пользуется специальной кнопкой «Наверх».

Преимущество этой кнопки заключается в том, что она может работать на планшетах и смартфонах, и в любых других случаях, когда у вас нет под рукой клавиатуры. К тому же, не все пользователи могут знать о полезной функции клавиши Home, а кнопка на сайте всегда видна, по ней сразу видно, для чего она предназначена.

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

Демо Загрузить архив RAR

Шаг 1. CSS

Та часть CSS, которая касается стиля кнопки, выглядит следующим образом:

.inTop { position: fixed; left: 0px; top: 0px; width: 20%; height: 100%; opacity: 0.5; filter: alpha(opacity=50); cursor: pointer; display: none; } .inTop:hover { background-color: #f5f4f4; opacity: 1; filter: alpha(opacity=100); } .inTop span { display: block; width: 100%; margin-top: 20px; text-align: center; font-size: 110%; color: #52466a; font-family: Georgia, Times, serif; font-weight: bold; }

Шаг 2. JavaScript

Следующий шаг – код JavaScript. Для удобства внутри добавлены комментарии с пояснениями:

// объявление переменных: var BottomPosition = 0; // положение страницы var BottomFlag = false; // флаг для отображения кнопки GO TO BOTTOM var AnimateFlag = false;// Флаг для выполнения анимации $(document).ready(function() { $(‘.inTop’).click(function() { // клик по кнопке GO TO TOP/GO TO BOTTOM AnimateFlag = true; // выполняется анимация if(BottomFlag) { // если нажата кнопка GO TO BOTTOM… $(«body,html»).animate({«scrollTop»:BottomPosition}, 200, function() { // …происходит возврат в нужное место страницы со скоростью 200 AnimateFlag = false; // закончилось выполнение анимации }); BottomFlag = false; // заменяем кнопку $(‘.inTop span’).html(‘GO TO TOP’); } else { // если нажата кнопка GO TO TOP… $(«body,html»).animate({«scrollTop»:0}, 200, function() { // …происходит возврат в начало страницы со скоростью 200 AnimateFlag = false; }); BottomPosition = $(window).scrollTop(); // запоминаем, до какой позиции была прокручена страница BottomFlag = true; // показываем кнопку GO TO BOTTOM $(‘.inTop span’).html(‘GO TO BOTTOM’); } }); // осуществляем проверку при прокручивании страницы: $(window).scroll(function(event) { var countScroll = $(window).scrollTop(); if (countScroll > 200 && !AnimateFlag) { // если пользователь промотал более 200 пикселей… $(‘.inTop’).show(); // …показываем кнопку GO TO TOP if(BottomFlag) { BottomFlag = false; $(‘.inTop span’).html(‘GO TO TOP’); } } else { if(!BottomFlag) { $(‘.inTop’).hide(); // в других случаях прячем кнопку, если только это не кнопка GO TO BOTTOM } } }); });

Шаг 3. HTML

Осталось дело за малым – создать кнопку в HTML:

GO TO TOP

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

Желаем вам творческих успехов и довольных пользователей!

Кнопка наверх для сайта

Наверняка на многих блогах вы замечали кнопку, которая появлялась после небольшой прокрутки статьи. Это кнопка наверх для сайта очень удобная для читателя вещь, добавляющая дополнительное удобство при прочтении статьи. Реализацией этой кнопки мы сейчас с вами и займемся.

Зачем нужна кнопка наверх для сайта

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

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

Кнопку можно установить на блог как плагином, так и отдельным кодом. На моем блоге ни один вариант кода не заработал. Никаких ошибок, но кнопка не показывается. Тот же косяк с некоторыми плагинами. Корректно у меня заработали только два плагина. О них и будет мое сегодняшнее повествование. Надеюсь, вы знаете, как установить плагин на wordpress?

Smooth Scroll Up

Плагин позволяет добавить кнопку в четырех вариантах

изображение
текст ссылки
таблетка
вкладка

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

Интересно: Удаление неиспользуемых изображений на блоге wordpress

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
/* Image style */a.scrollup-image {background-image: url(«../img/scrollup.png»);bottom: 20px;right: 20px;width: 300px;height: 38px;background-size: 38px 38px;background-repeat: no-repeat;}/* Tab style */a.scrollup-tab {zIndex: 9999999;bottom: -10px;width: 70px;height: 70px;padding: 10px 5px;font-family: sans-serif;font-size: 14px;line-height: 20px;text-align: center;text-decoration: none;text-shadow: 1px #fff;color: #828282;-webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.2);background-color: #E6E6E6;background-image: -moz-linear-gradient(top, #EBEBEB, #DEDEDE);background-image: -webkit-gradient(linear, 0, 100%, from(#EBEBEB), to(#DEDEDE));background-image: -webkit-linear-gradient(top, #EBEBEB, #DEDEDE);background-image: -o-linear-gradient(top, #EBEBEB, #DEDEDE);background-image: linear-gradient(to bottom, #EBEBEB, #DEDEDE);background-repeat: repeat-x;-webkit-transition: bottom 150ms linear;-moz-transition: bottom 150ms linear;transition: bottom 150ms linear;}a.scrollup-tab:hover {bottom: 0px;}/* Pill style */a.scrollup-pill {zIndex: 9999999;bottom: 20px;background: #555;color: #fff;font-size: 12px;font-family: sans-serif;text-decoration: none;opacity: .9;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;-webkit-transition: background 200ms linear;-moz-transition: background 200ms linear;transition: background 200ms linear;}a.scrollup-pill:hover {background: #000;color: #fff;}/* Text link style */a.scrollup-link {bottom: 20px;zIndex: 9999999;}/* Center style */a.scrollup-center {left: 47%;}/* Right style */a.scrollup-right {right: 20px;}/* Left style */a.scrollup-left {left: 20px;}

Scroll To Top

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

Интересно: Лучшие плагины для wordpress блога

Настроек минимум. Поменять можно текст, ширину, цвет текста и цвет фона кнопки.

Пользуйтесь описанными плагинами и кнопка наверх для читателей вашего сайта станет очередной удобной фишкой. Они будут вам благодарны. Честное пионерское! Зуб даю!

С уважением Денис Иванов, автор блога dendrblog.ru

Кнопка «Вверх» для сайта — простой и легкий скрипт на jQuery от Яндекса

$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$(‘#scroller’).fadeIn();} else {$(‘#scroller’).fadeOut();}});
$(‘#scroller’).click(function () {$(‘body,html’).animate({scrollTop: 0}, 400); return false;});
});

Например, для WordPress надо будет редактировать файл шаблона header.php, а в DLE необходимо будет добавлять код в шаблон main.tpl.

Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом

наверх

Опять же, в WordPres надо редактировать файл footer.php, а для DLE снова main.tpl.

Шаг 3. Добавляем CSS-стили блока и кнопки вверх в файл style.css (название файла style.css у вас может быть и другим, но это не важно, добавьте код в любой файл стилей, который подключается к сайту).

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://alaev.info/wp-content/plugins/goupbutt/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);} .b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;} .

b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px; color:white;background:#D8D5C2 url(http://alaev.info/wp-content/plugins/goupbutt/b-j-top.

png) no-repeat 50% 11px;border-radius:7px;}

Как видите, я даже url фоновой картинки со стрелкой не стал менять, оставил подгрузку с яндексовских серверов. На Яндексе пропала картинка, указал путь к картинке на своем сервере, а вам рекомендую ее сохранить к себе, будет надежнее.

Что тут можно настроить и изменить под себя:

bottom:90px; – смещение блока с кнопкой относительно низа страницы;
width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может. Данные значения я выявил экспериментально, проверяя положение кнопки на разных разрешениях экрана именно для моего шаблона на блоге. Чего и вам рекомендую;
padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
color:white; — цвет надписи «вверх»;
border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.

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

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

С уважением, Александр Алаев

Кнопка — наверх для сайта без плагина!

’’. Находятся эти теги в файле ‘’header.php’’ или ‘’index.php’’. У меня добавлен этот код в файле ‘’header.php’’ и работает все отлично.

Этот код подключает библиотеку jQuery, про которую я говорил. Если у вас уже она подключена, то пропустите этот шаг, и приступайте к следующему. Вставить данный код, перед закрывающимся тегом ‘’’’, находится в файле ‘’header.php’’:

$(document).ready(function() {$(‘body’).append(‘^ Наверх’);$(window).scroll(function() {if($(this).scrollTop() > 200) {$(‘#toTop’).click(function() {$(‘body, html’).animate({scrollTop: 0}, 400);

И необходимо добавить такой код в таблицу ‘’style.css’’, чтобы придать красивый внешний вид кнопке:

border: 1px solid #b1b1b1; font: 11px Verdana, Arial, Helvetica, sans-serif;

Стиль кнопки

Теперь немного объясню, как менять настройки и стиль кнопки.

Строка: if($(this).scrollTop() > 200) {Отвечает за появление кнопки, если значение изменить на 250, то кнопка появится позже, если на 150 — раньше.Строка: $(‘body, html’).animate({scrollTop: 0}, 400);Скорость возвращения наверх, чем выше значение, тем медленней прокрутка вверх. Значение показано в миллисекундах.Строка: $(‘body’).append(‘^ Наверх’);Вместо слова «наверх» можете написать, что-то свое.

Теперь про сами стили, расскажу только то, что вам пригодится, возможно.

width: 80px; — размер формы кнопки;top: 10px; — расстояние от верха;left: 10px; — расстояние от левого края;cursor: pointer; — указатель мыши при наведении;background: #f2f2f2; — цвет кнопки;border: 1px solid #b1b1b1; — толщина и цвет рамки вокруг кнопки;text-align: center; — текст по центру;color: #404040; — цвет текста;font: 11px Verdana, Arial, Helvetica, sans-serif; — шрифт текста;Я добавил еще стиль при наведении указателя:#toTop:hover { background: #B7D1EC; } – ставьте в самом конце, если нужно вам.

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

-moz-border-radius: 80px; — закругление углов-webkit-border-radius: 80px; — закругление углов

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

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

Это основные настройки и стили нашей кнопки.

На этом у меня все, надеюсь было полезно!

Удачи Вам и до новых встреч!!!

Как сделать кнопку «наверх» на WordPress блоге

Привет, Друзья! По просьбам читателей сегодня я расскажу как сделать кнопку “наверх” на WordPress блоге. Я думаю, нет необходимости объяснять для чего нужда такая кнопка? Все итак понимают, что при нажатии на кнопку “наверх”, функция, заложенная в данной кнопке, переносит читателя к началу страницы.

Это особенно полезно когда пост объемный и много комментариев к статье, и для того, чтобы вернуться к началу статьи, приходится довольно продолжительно скролить колесико мышки (а большинством из нас правит лень), поэтому кнопка “наверх” сохраняет наше “душевное равновесие”и моментально возвращает к началу статьи.

Сделать кнопку “наверх” можно как при помощи плагина, так и по средствам небольшого скрипта. В этом уроке я расскажу про оба способа.

Т.к. новички не очень любят лезть в файлы сайта и что-то в них менять/добавлять, то тогда подойдет небольшой и легкий плагин Scroll to Top.

Для более опытных пользователей WordPress, функцию возвращения “наверх” осуществим с помощью скрипта. Хотя скрипт и для новичка поставить не составит труда.

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

(Просто нужно знать в какой файл вставить, поэтому прочтите статью о структуре шаблона WordPress).

Почему многие предпочитают скриптами пользоваться? Да все просто — чем больше плагинов активировано на блоге, тем дольше блог загружается, нагрузка на хостинг больше ну и все вытекающие из этого…

Как сделать кнопку “наверх” с помощью плагина Scroll to Top

Итак, скачиваем плагин Scroll to Top – скачать

Дальше устанавливаем и активируем плагин на своем WP блоге. (Как установить плагины на WordPress)

После того, как активировали плагин Scroll to Top, при обновлении страницы на блоге, начните спускаться по странице вниз), и чуть ниже от верха, слева внизу появится кнопка “наверх”

В принципе можно ничего не менять, все работает и так нормально, но для тех, кто хочет изменить скорость пролистывания страницы наверх (при нажатии на кнопку), или хочет, чтобы кнопка появлялась ниже или выше (кнопка по умолчанию появляется после 350 строки(строки, наверное, считаются по исходному коду)), то зайдите в настройки плагина: “Админка — Параметры — Scroll to Top”

Важно

В настройках плагина Scroll to Top все на русском языке и все понятно: о ссылках на изображение поговорим ниже, со скоростью и после какой строки будет появляться кнопка “наверх” можете поэкспериментировать сами и настроить как вашей душе угодно!

Если Вам не нравится стандартная кнопка “наверх” (стрелочка в синем кругляшке), то можете скачать архив с кнопками и заменить на наиболее Вам понравившуюся кнопку. В архиве вот такие кнопки:

Скачать кнопки для плагина Scroll to Top

После того, как скачали архив с кнопками, его нужно разархивировать и полученную папку “icons” с помощью FileZilla или Total Commander по FTP закачать на сервер в корневую папку блога /public_html/ , или в любую другую с изображениями.

Хотя можно выбрать нужную кнопку на компьютере, а затем закачать только одну картинку в папку /public_html/images

Я Вам советую в корне блога (/public_html/) создать папку “images” и закачивать в нее изображения для таких вот случаев.

Вам еще не раз придется закачивать картинки от различных плагинов, скриптов — и чтобы быстренько закачать и прописать путь до нужного изображения, папка “images” в корне блога – это самый оптимальный вариант.

Вот такой путь будет в итоге: /public_html/images.(иногда вместо /public_html/ нужно вписать адрес своего сайта!)

Затем идем в настройки плагина Scroll to Top: “Админка – Параметры — Scroll to Top” и прописываем полный путь до картинки:

Совет

Т.к. папку “icons” я закачал в корень блога (в /public_html/), то после того, как я определился с картинкой, в поле ввода ссылки на картинку, я прописал путь до той кнопки, которую хочу видеть у себя на блоге (http://aimblog.ru/icons/UP1.png) Прописывайте путь до вашей картинки внимательно!!!

Вот что получилось:

Это я показал просто пример, Вы можете поставить любую кнопку “наверх”. Также кнопки можете найти в интернете или нарисовать в фотошопе.

Небольшое дополнение:

Если Вы решите скачать плагин через поиск в админке блога, то в директории WordPress, плагин Scroll to Top 1.2 не такой как я описывал выше, там другой плагин.

При скачивание и активации плагина из админки блога, кнопка «наверх» будет внизу и в середине статьи, примерно так:

Изменить цвет, ширину и текст в кнопке можете в «Админка — Параметры — Scroll to Top»

Так что имейте это ввиду!!! И если не хотите скачивать версию плагина из директории WordPress, тогда скачивайте Scroll to Top по моей ссылки.

С плагином Scroll to Top разобрались. У кого остались вопросы, задавайте в комментариях, отвечу с удовольствием. Теперь давайте сделаем кнопку «наверх» без плагина.

Как сделать кнопку “наверх” без плагина

Итак, для начала скачаем архив с файлами “verx.js” и “verx.gif” –скачать

Затем распаковываем скачанный архив и по FTP файл “verx.js” загружаем в корень блога (/public_html/);

Файл “verx.gif” закачиваем в папку /public_html/images.

Теперь, для того чтобы при нажатии на кнопку “наверх”, страница пролистывалась к началу плавно, необходимо подключить библиотеку jquery. Для этого блокнотом notepad++ открываем файл вашего шаблона “functions.php” и в самом начале, сразу после открывающего тега

Навигация по сайту — примеры как сделать навигацию удобной

Практические советы по созданию понятного сайта

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

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

Меню — один из главных инструментов навигации на сайте. Его удобство будет критическим.

Обратите внимание

При создании меню старайтесь использовать не более 4−5 пунктов и в целом не перегружать его большим количеством элементов. Если пунктов меню все-таки получается много, как вариант, можно использовать меню «гамбургер».

Советы и инструкции по дизайну удобного меню сайта

Пункт «Главная» в меню — это пережитки навигации сайта 90-х. Вместо этого сделайте кликабельный логотип.

Сейчас уже сложилась устойчивая модель: при клике на логотип происходит переход в начало главной страницы. Поэтому смело удаляйте «Главная» из меню и не забывайте добавить ссылку для логотипа.

Кстати, чтобы на Тильде сделать ссылку на главную страницу, достаточно поставить просто косую черту (/) вместо полного адреса в настройках блока.

Слеш ( / ) в поле «ссылка» будет вести на первый экран главной страницы сайта.

Меню также может быть навигатором внутри одной страницы, когда вы делаете лендинг или лонгрид.

Если информации много, добавьте меню с ссылками на разделы страницы — это упростит навигацию.

Чтобы сделать на Тильде меню с ссылками на разные блоки внутри страницы, в настройках контента меню пропишите в ссылках номера этих блоков (номер каждого блока указан в его настройках), либо используйте якорные ссылки.

Якоря и ссылки внутри страницы

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

Для того, чтобы сделать фиксированное меню в настройках блока в разделе «Основные настройки» выберите вариант позиционирования меню «Фиксация при скролле».

Важно

Меню может показывать в каком разделе сайта находится пользователь, выделяя пункт, который относится к данному разделу.

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

Кроме того, активный пункт меню можно подчеркнуть или зачеркнуть.

Такие же настройки можно применить и для пункта меню, на который наведена мышь.

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

Индикаторы в виде точек не отвлекают внимание от контента, но подсказывают в какой части страницы находится посетитель.

На Тильде у таких навигаторов есть также всплывающая подсказка с названиями разделов для удобной навигации по сайту . Блок находится в категории «Меню» под номером ME604.

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

На Тильде блок индикатора находится в категории «Другое» под номером Т228. Чтобы индикатор работал, разместите блок в самом верху страницы.

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

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

Совет

Чтобы добавить индикатор прокрутки на Тильде, используйте блок T333 из категории «Другое». В настройках блока можно задать цвет и толщину индикатора.

Из двух соседних кнопок более важная должна визуально выделяться.

Обычно первая кнопка целевого действия страницы, например — «Записаться на мероприятие», «Купить курс», «Посетить первый урок бесплатно». Вторая кнопка менее значительна, в большинстве случаев это ссылка на дополнительную информацию: «Подробнее», «О нас», «Как это работает».

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

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

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

Хороший прием — написать на кнопке какое именно количество элементов, она скрывает.Скрыть часть контента можно несколькими способами:

Кнопка «Показать еще». Она находится в разделе «Форма и кнопка» под номером BF703.

Текст в раскрывающихся блоках. Отличный вариант для длинных списков с услугами или ответами на вопросы. Его можно найти в разделе «Текстовый блок» под номером TX16.

Вкладки с раскрывающимся контентом. Находятся в разделе «Меню» под номерами ME602 и ME603. Эти блоки позволяют создавать на странице несколько вкладок и показывать разный контент по клику на соотвествующую вкладку в рамках одной страницы.

Кнопка «Наверх» помогает пользователю из любого места страницы быстро попасть в ее начало.

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

В Тильде блок с кнопкой «Наверх» находится в разделе «Форма и кнопка» под номером BF702.

Обратите внимание

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

Если вы сделали лендинг — самое время повторить призыв к действию. Если на странице находится статья, в конце можно поставить ссылки на другие статьи похожей тематики. В Тильде для этой цели можно использовать блоки из разделов «Плитка и ссылка» либо «Список страниц».

URL (Uniform Resource Locator) — это единообразный адрес, указывающий путь к интернет ресурсу. Иными словами, это ссылка, которая отображается в адресной строке браузера.

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

Для понятных упорядоченных URL адресов существует термин ЧПУ (человекопонятный URL).

ЧПУ состоит из понятных пользователю слов, а не из системного адреса (в Тильде системный адрес страницы будет выглядеть, например, так: /page4652188.html).

https://www. mysite.com/shop/men/shirts

Первая часть (https://) показывает метод, который используется для получения доступа к интернет ресурсу. Протокол HTTP используется чаще всего. Вторая часть адреса — это имя вашего домена, адрес, по которому сайт можно найти в сети. Если сайт многостраничный, www.mysite.

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

Важно

Адрес страницы в Тильде можно поменять в разделе «Настройки страницы». Если вы хотите использовать несколько слов в адресе страницы, прописывайте их через дефис «-» либо через символ подчеркивания «_». Например, /about-us или /our_works.

Уделите внимание структуре и дизайну меню сайта.

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

Акцентируйте внимание пользователя на значимых кнопках. Сделайте их ярче и задайте дополнительные настройки для анимации кнопки при наведении мышью.

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

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

Кнопка «Наверх» поможет пользователю быстро вернуться в начало страницы. Используйте ее на страницах с большим количеством контента для удобной навигации на сайте.

Избегайте «тупика» в конце страницы. Предложите пользователю просмотреть похожие материалы по теме страницы либо установите ссылки, которые ведут на главную, следующую или предыдущую страницы.

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