Адаптивная кнопка вверх. Анимированный переход на верх страницы

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

1. Подключим библиотеку jQuery. Кстати, об этом я писал недавно .
Добавьте между тегами … вот этот код:

2. Добавляем между тегами саму кнопку-ссылку «Наверх»:

наверх наверх

и сразу после кнопки «Наверх» добавьте код JavaScript:

$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up").fadeOut(400); }); $("a#move_up").click(function(){ $("body,html").animate({scrollTop: 0}, 450); return false; }); });

Обратите внимание на строку №6 , там есть цифра 100 – она указывает, через какое количество слов должна появляться кнопка «Наверх». Вы можете указать любую другую подходящую для вас цифру.
В строке №11 есть цифра 450 – указывает скорость подъема страницы. Вы можете тоже указать свою цифру. Чем выше цифра, тем медленнее страница поднимается наверх, чем меньше цифра, тем быстрее страница окажется наверху.

3. Теперь добавьте код CSS. Кто не знает, как подключить CSS к HTML файлу, почитайте об этом тут.

A#move_up { position:fixed; /* фиксированное положение блока*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans-serif; color:#fff; background:#3366ff; padding-top:5px; /*прозрачность*/ opacity:0.7; filter:alpha(opacity=70); border-radius: 2px; text-decoration:none; } a#move_up:hover { opacity:0.9; filter: alpha(opacity=90); }

Вот это и все. Вот так выглядит полностью готовый код:

a#move_up{ position:fixed; /* фиксированное положение блока*/ top:8px; right:20px; width:56px; height:20px; display:none; text-align:center; font:12px Arial,Verdana,sans-serif; color:#fff; background:#3366ff; padding-top:5px; /*прозрачность*/ opacity:0.7; filter:alpha(opacity=70); border-radius: 2px; text-decoration:none;} a#move_up:hover{ opacity:0.9; filter: alpha(opacity=90);} Ваш текст (желательно больше текста) наверх $(function() { $(window).scroll(function() { if($(this).scrollTop()>100) $("a#move_up").fadeIn(); else $("a#move_up").fadeOut(400); }); $("a#move_up").click(function(){ $("body,html").animate({scrollTop: 0}, 50); return false; }); });

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

Доброго времени суток, уважаемый посетитель/подписчик моего сайта !

В этой статье я хочу рассказать/показать как сделать кнопку НаВерх/Вверх/To Top для сайта без использования всяких ненужных плагинов.

Будем брать в пример сайт на движке WordPress но инструкцию можно попробовать применить на любых платформах.

Я постараюсь объяснить, на сколько это возможно, проще что бы Вы остались без вопросов, постараюсь более детально написать какие коды/скрипты (html, css, JavaScript) и куда их нужно вставлять для того что бы у Вас все заработало.

Сперва хочу рассказать, зачем на сайте вообще нужно ставить кнопку НаВерх/Вверх/To Top :

• Во первых это для удобства — Вашего и Ваших посетителей.

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

• Во вторых для дизайна – красиво оформленные и качественно подобранные под дизайн сайта, кнопки НаВерх/Вверх/To Top – всегда будут иметь свое место на экране.

Пожалуйста уделите дизайну кнопки НаВерх/Вверх/To Top нужное время. Посмотрите на то как реализовали эту кнопку такие высоко посещаемые сайты как Одноклассники и VK – убого – могли бы постараться (не буду останавливаться на этом).

Тоже в дизайн сайта входит и размеры и местоположение кнопки НаВерх/Вверх/To Top.

По размеру — делайте кнопку не сильно маленькой и не слишком большой – так, подходяще…

По местоположению – ВНИЗУ-СПРАВА и точка. Потому что большинство людей привыкли искать эту кнопку именно там. Не придумывайте ничего лишнего, так как кнопку НаВерх/Вверх/To Top Вы будете делать, устанавливать и настраивать один раз (желательно) и потом Вы должны о ней забыть, так как написание хороших статей, для сайта, более важное занятие…

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

Спешу порадовать, что ниже будут представлены 2 метода установки кнопки НаВерх/Вверх/To Top на сайте – один метод ну очень простой, другой чуток труднее – в плане его реализации, но последовав простым шагам, ВСЕ получится, даже не сомневайтесь.

Давайте сперва разберемся с изображением для кнопки НаВерх/Вверх/To Top .

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

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

Что бы скопировать картинку на свой компьютер, нажмите правой кнопкой мыши и выберите «Сохранить картинку как… » или «Save Image As… ».

Пример : http:// мой-сайт.ru /wp-content/themes/ название_темы /images/ название_картинки.png

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

Заходим в административную панель сайта (админку) -> Внешний вид -> Виджеты .

Перетаскиваем в правый сайдбар (или в любой другой сайдбар) виджет «ТЕКСТ ». Открываем и вводим следующий html код:

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

Итак, задаем стиль кнопки – для этого заходим в админ панель сайта -> Внешний вид -> Редактор (файл style.css ) и в самом конце вставляем следующий код:

a .naverx {
position :fixed;
bottom : 70px;
margin-left : 1020px;
right :5px;
background : #417297 url (http://сайт/wp-content/themes/pressa/images/nawerx.png) center center no-repeat;
width : 32px;
height : 32px;
border-radius : 5px;
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
-o-border-radius : 5px;
cursor : pointer;
padding : 15px;
margin : 20px;
opacity : 0.8;
box-shadow : inset 0 1px 0 rgba (255,255,255,0.5), 0 2px 2px rgba (0,0,0,0.3), 0 0 4px 1px rgba (0,0,0,0.2);
-webkit-transition : all 0.2s 0.01s ease;
}

a .naverx :hover {
background : #F0824F url (http://сайт/wp-content/themes/pressa/images/nawerx.png) center center no-repeat;
box-shadow : none !important ;
opacity : 1;
}

ПОЖАЛУЙСТА — замените ссылку изображения кнопки (параметр background :) на ссылку изображения которое Вы загрузили на свой хостинг.
Когда я удалю изображение — и Ваша кнопка тоже пропадет.На время настройки кнопки, можете пользоваться ссылкой, но не забудьте заменить ее!!!

Обязательно сохраняем все настройки, обновляем страничку сайта и если все правильно сделано на Вашем сайте должна появится кнопка НаВерх/Вверх/To Top.

Для того что бы подобрать цвет кнопки под дизайн сайта, находясь на страничке сайта, наведите курсор мышки на кнопку, нажмите правый клик и в меню выберите последний пункт: «Inspect Element ». Ваш браузер откроет, в нижней части, коды html, java и соответствующие им – элементы стиля.

В правой части, найдите стиль «a.naverx » и в параметре background нажмите на квадрат с цветом кнопки.

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

Напоминаю что замена делается в файле style.css и не забудьте сохранить. Кстати, когда Вы будете выбирать цвет, то увидите сразу изменения на экране, так что подбор цвета не самая трудная задача.

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

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

Итак, картинка у Вас есть (см. выше), далее Вам нужно зайти в файл bottom.php (Внешний Вид -> Редактор ), найти там закрывающиеся тег и прямо перед ним вставить следующий код самого скрипта кнопки НаВерх/Вверх/To Top:

$(function (){$.fn.scrollToTop=function (){$(this).hide ().removeAttr («href»);if ($(window).scrollTop ()!="0"){$(this).fadeIn («slow»)}var scrollDiv=$(this);$(window).scroll (function (){if ($(window).scrollTop ()=="0"){$(scrollDiv).fadeOut («slow»)}else{$(scrollDiv).fadeIn («slow»)}});$(this).click (function (){$(«html, body»).animate ({scrollTop:0},"slow")})}});

//

Сохраняемся, далее заходим в файл style.css , копируем код стиля, который находится выше (a .naverx , a .naverx :hover ), вставляем код и сохраняем изменения.

Заходим на страницу своего ресурса, обновляем страницу и радуемся результату.

Внимание! JavaScript код можно вставлять и в файле header.php а в моей теме WP он установлен в файле theloop.php .

Если код/кнопка вверх не будет работать в одном файле, попробуйте установить код скрипта в другом (из выше перечисленных)– обязательно получится.

В стиле a .naverx , находится параметр margin-left : 1020px; — меняйте его значение (1020px) для того что бы расположить кнопку НаВерх/Вверх/To Top левее или правее.

Пример кнопки Вы можете наблюдать на моем блоге, что-то похожее должно получится и у Вас!

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

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

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

Преимущество данного способа - простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).

Кнопка наверх с помощью CSS - "Нубекс" .topNubex { position: fixed; right: 45px; bottom: 45px; } Вверх

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

Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.

Кнопка "Вверх" при помощи JavaScript - "Нубекс" #topNubex { position: fixed; right: 45px; bottom: 45px; } $(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $("#topNubex").fadeIn(); } else { $("#topNubex").fadeOut(); } }); $("#topNubex").click(function() { $("body,html").animate({scrollTop:0},700); }); });

В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки "Наверх" на сайт.

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

В статье будут следующие части:

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

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

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

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

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

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

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

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

Достоинства:

• Простота и легкость настройки;
• Не нужна поддержка библиотек и скриптов.

Недостатки:

• Кнопка видна постоянно, даже когда посетитель находится в самом верху страницы;
• Перемещение вверх происходит не плавно, а мгновенно, рывком.

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

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

Buttonup { width:88px; height:118px; position:fixed; bottom:20px; right:50px; }

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

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

• Кнопка не будет постоянно маячить перед глазами, а появится только тогда, когда посетитель пролистает страницу вниз;
• Эффект возвращения наверх страницы будет плавным, что выглядит стильно;
• Кроме того, наша кнопка будет меняться при наведении курсора (менять цвет или яркость).

Существует масса способов и скриптов, позволяющих сделать кнопку вверх. Признаюсь честно, я не программист и, если в предыдущем варианте с HTML я разобрался, то в JavaScript я полный чайник. Поэтому я просмотрел и изучил кучу разных версий и выбрал для себя вариант, который проще всего реализовать (меньше изменений в разных файлах).

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

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

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

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

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

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

jQuery(document).ready(function($){ $(""+ "..png) 0 0 no-repeat; }" + ".scrollTop:hover{ background-position:0 -133px;}" +"").appendTo("body"); var speed = 550, $scrollTop = $("").appendTo("body"); $scrollTop.click(function(e){ e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate({ scrollTop: 0}, speed); }); //появление function show_scrollTop(){ ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); } $(window).scroll(function(){ show_scrollTop(); }); show_scrollTop(); });

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

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

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