Кнопка наверх jquery

Кнопка «Вернуться Наверх» или «Back to Top» популярный и полезный элемент на страницах современных сайтов, особенно в тех случаях, когда на этих страницах размещено много контента.
Прежде всего, такие кнопки в целом улучшают юзабилити сайта. Когда пользователь ознакомившись с большим количеством контента, прокрутив страницу до самого низа, чтобы вернуться в верхнюю часть сайта, использует стандартный скролинг. Чтобы пользователь перенаправлялся в верхнюю часть страницы автоматически, разработчики и админы сайтов, думающие о своих посетителях, как раз и используют различные вариации кнопок «Вернуться Наверх». Это могут быть самые простые решения без задействования каких-либо дополнительных библиотек или скриптов, а так же кнопки с расширенным функционалом, с подключением библиотеки jQuery и небольшого исполняющего скрипта.

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


Сегодня, на простом примере, рассмотрим, как с помощью анимации CSS можно добавить немного движухи для всплывающей кнопки «Вернуться Наверх» и попутно разберём сам скрипт содержащий события jQuery, необходимые для функционирования кнопки.
 
Кнопка Вернуться Наверх

Чтобы задействовать кнопку на своем сайте, нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить библиотеку jQuery и прописать небольшой исполняемый js, и кнопка будет работать. Оформление внешнего вида и анимацию сформируем с помощью CSS, подключив файл стилей style.css к документу html.
 

Javascript jQuery

И так, если у вас на сайте, ещё не подключена библиотека jQuery, это легко сделать, подключив актуальную версию напрямую из сети доставки контента (CDN) Google, для этого достаточно, перед закрывающим тегом </body> прописать следующую строку:
 

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

Добавил в скрипт некоторые комментарии, так сказать, для большего понимания. Как писал выше, данный метод исключает необходимость добавлять какие-либо теги в разметку HTML страницы, с этим прекрасно справляется скрипт. Когда пользователь прокрутит страницу вниз на 300px, плагин пропишет тег кнопки, в нашем случае это:

в тело страницы, всё там же перед закрывающим тегом
</body>.

Для плавного появления и скрытия кнопки используем функции .fadeIn () и .fadeOut () с заданной скоростью 600 миллисекунд. Скорость прокрутки к началу страницы выставляем в значении 500 миллисекунд.
 

CSS

Для разметки кнопки использовал тег <a>, ссылку в адрес которой, прописал хеш(решётка), атрибут title — при наведении на кнопку будет выводится стандартная подсказка, присвоил определённый класс с именем селектора scrollTop, а в качестве анкора ссылки применил шрифт-иконку из пакета Font Awesome <i class="fa fa-angle-double-up"></i>.
Теперь, зная имя селектора, непосредственно в CSS, с помощью определённых свойств, оживим нашу кнопку, сформируем внешний вид, определим место появления на странице, а так же прикрутим анимацию.
Внутри кода css, практически каждому свойству, добавил подробные комментарии, так что не вижу смысла расписывать всё под.
ествует возможность подключения библиотеки напрямую, например с Bootstrap CDN, для этого в HTML, в разделе, достаточно прописать следующую строку:

После подключения Font Awesome, вы можете использовать их в коде HTML или, как в нашем случае в js, с помощью специальных классов, базового fa и класса для определённого типа иконки, у нас это fa-angle-double-up. Узнать класс той или иной иконки можно на сайте Font Awesome.
Внешний вид контейнера иконки, размер и цвет фона, позиционирование, цвет и размер шрифта, всё это определяем уже непосредственно в css, ориентируясь на селектор .scrollTop i

Осталось рассмотреть саму анимацию. Эффект анимации применён не ко всей кнопке, а к дополнительным псевдоэлементам :after и :before. Чтобы создать CSS-анимацию необходимо добавить в стили этих элементов свойство animation, что позволит определить имя, настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Внешний вид анимации настраивается с помощью @keyframes
, набора ключей настраивающего кадры анимации.

В нашем примере имя анимации: clickMe, длительность: 1.8s, задержка: 333ms для :before и 777ms для псевдоэлемента :after. Так же определяем количество повторении анимации — бесконечное infinite и тип анимации ease-out — ускорение в начале.

После того, как мы настроили временные свойства анимации, остаётся определить внешний вид анимации, делается это внутри блока @keyframes. Сначала задается имя анимации, а затем внутри фигурных скобок описываются её шаги. Из примера кода видно, что используются кадры свойства opacity(прозрачность) и трансформации элемента transform с функцией scale — масштаб элемента. Шаги анимации заданы через проценты.
Анимация CSS свойств описана отдельно для webkit-браузеров @-webkit-keyframes и браузера Mozilla Firefox @-moz-keyframes, дабы исключить некорректное отображение анимации в этих веб-браузерах.

На этом всё. Ещё раз просмотрите живой пример работы кнопки «Вернуться наверх» и если оно вам надо, скачивайте исходники упакованные в архив и выложенные в облако на Я.Диске.

С Уважением, Андрей .

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

dbmast.ru

Нужна ли


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

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

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

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

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

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

Кнопка вверх, как Вконтакте


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

«>

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

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

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


Чтобы реализовать его, нужно всего лишь разместить скрипт на сайте.

Для загрузки скрипта можно разместить сам код между тегами <head></head> или перед закрывающим тегом </body> в файле footer.php. А можно просто загрузить файл со скриптом на хостинг, а затем просто сделать загрузку файла на сайте.

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

В данном коде можно изменить некоторые параметры под себя.

  • Строка 4 отвечает за вывод самой области для прокрутки страницы. В ней прописаны основные стили для отображения кнопки. в принципе, данные параметры должны подойти практически каждому. Но может потребоваться и отредактировать их под себя;
  • В строке 7 в скобках имеется число 300, которое отвечает за момент появления кнопки. То есть, кнопка будет появляться только после прокрутки 300 пикселей вниз. Рекомендую тут подобрать такое значение, чтобы прокрутка была возможной только тогда, когда с поля зрения пропадает основное меню сайта или какие-то другие важные элементы в навигации;
  • В строке 17 значение 100 отвечает за скорость прокрутки. Чем меньше значение, тем быстрее возвращение вверх страницы.

Данный код можно разместить между тегами <head></head> в верхушке сайта. Если сайт на WordPress то данная область находится в файле шаблона header.php. Также можно разместить перед закрывающим тегом </body> в самом низу сайта (файл footer.php). Последний вариант я и рекомендую, так как он позволит ускорить загрузку сайта. Выглядеть будет это так.

«>

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

«>

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

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


«>

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

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

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

Второй способ кнопки наверх от Вконтакте

По данному способу я записал подробный видео-урок.

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

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

Состоит из 3х этапов:

  1. Размещение скрипта на сайте;
  2. Размещение кода, отвечающего за вывод кнопки;
  3. Оформление с помощью CSS стилей.

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

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

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

Файл скрипта скачайте по кнопке ниже.

«>

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

Далее нужно вывести саму кнопку. за это отвечает следующий код.

Разместить его можно в самом низу сайта, перед закрывающим тегом </body> в файле footer.php.

«>

Затем прописываем стили оформления в свой файл стилей (style.css) и загружаем все измененные файлы на хостинг. Вот сами стили.

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

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

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

Третий способ кнопки наверх без плагина

Реализация кнопки также очень простая и 100% работает на сайте WordPress. По поводу HTML сайта или другого движка сказать не могу. Тестируйте.

Нужно скопировать следующий код со скриптом в самый низ сайта перед закрывающим тегом </body>/

  • В строке 8 задаем отступ после которого будет доступна кнопка для прокрутки.
  • В строке 17 задаем значение скорости прокрутки (чем меньше, тем быстрее).

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

  • В 4й строке прописан отступ кнопки от правой границы экрана. Данный параметр вполне нормально смотрится на любом разрешении монитора. Поэтому, можно его не менять;
  • В 7й строке прописан путь к картинке, которая будет отображаться. Поэтому, вам необходимо найти изображение небольшого размера и загрузить его в папку images, которая лежит рядом с фалом стилей. Название в данном коде картинка имеет top.png. Можете назначить любое другое;
  • Ширина и высота изображения стоит по 60 пикселей. В 8 и 9 строках ширину и высоту соответственно можно изменить.

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

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

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

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

Все. Останавливаюсь. Пока!

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

С уважением, Константин Хмелев!

Кнопка наверх jquery

kostyakhmelev.ru

Подготовка

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

CSS стили кнопки «Наверх»

В header страницы или в отдельном css файле, установим css стили для div блока с id=scroller.

<style> #scroller{  position: fixed;   /** позиция кнопки scroll to top **/  bottom: 30px;   /** картинка кнопки наверх**/  background: transparent url(arrow.png) no-repeat left top;   width: 32px;  height: 32px;  cursor: pointer;  /** скрываем кнопку в начале **/  display:none; } </style>

Как видите, прежде всего мы установили фиксированную позицию блока, вы можете поменять размещение кнопки scroll to top с помощью значения bottom. Далее мы устанавливаем фоном нашу стрелочку, которую подготовили на первом этапе. В конце, скрываем кнопку, чтобы ее не было видно, когда страница только загружена.

JavaScript код кнопки «Наверх»

Как и полагается, мы напишем код скрипта кнопки в секции header.

Для начала подключим библиотеку jQuery, для этого воспользуемся Google CDN. Хотя вы можете подключить из официального сайта jQuery, Microsoft или из своего сервера. Я использую Google CDN, по моему мнению, он работает наиболее быстро.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Создаем JavaScript функцию после загрузки библиотеки jQuery.

<script> $(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;  }); }); </script>

Разберемся в коде немного попозже… В начале мы вызываем функцию по загрузке страницы:

$(document).ready(function(){ });

В первой части функции, мы устанавливаем событие на scroll событие. Когда происходит скроллинг окна значение переменной scrollTop более 0, в это время мы выводим кнопку «Наверх», когда скроллинг не происходит, мы ее прячем.

Во второй части функции, мы цепляем обработчик события click на кнопку scroll to top (наверх), когда она нажата, мы анимируем скроллинг к тегу body. То есть происходит скроллинг в начало страницы.

На этом создание базового кода кнопки «Наверх» завершено!

Доработки Scroll To Top

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

sitear.ru

Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка «Наверх«. Если по ней кликнуть, то начинается плавная промотка полосы прокрутки до самого верха. Как реализовать плавную кнопку «Наверх» через jQuery, Вы и узнаете из этой статьи.

Для начала разберёмся с HTML-кодом:

<div id="content">Контент</div>
<div id="top">Наверх</div>

Перейдём к стилям:

#content {
  background-color: #ff0;
  height: 3000px;
}
#top {
  bottom: 0;
  cursor: pointer;
  display: none;
  font-size: 150%;
  position: fixed;
  right: 0;
}

Безусловно, стили могут быть любыми. Главное, у кнопки «наверх» поставить изначально display: none; и position: fixed; с соответствующими координатами размещения, чтобы она всегда находилась в конкретном месте, независимо от положения полосы прокрутки.

И, наконец, JavaScript, в котором мы используем jQuery:

<script type="text/javascript">
  var top_show = 150; // В каком положении полосы прокрутки начинать показ кнопки "Наверх"
  var delay = 1000; // Задержка прокрутки
  $(document).ready(function() {
    $(window).scroll(function () { // При прокрутке попадаем в эту функцию
      /* В зависимости от положения полосы прокрукти и значения top_show, скрываем или открываем кнопку "Наверх" */
      if ($(this).scrollTop() > top_show) $('#top').fadeIn();
      else $('#top').fadeOut();
    });
    $('#top').click(function () { // При клике по кнопке "Наверх" попадаем в эту функцию
      /* Плавная прокрутка наверх */
      $('body, html').animate({
        scrollTop: 0
      }, delay);
    });
  });
</script>

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

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

myrusakov.ru

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

Для того, чтобы создать кнопку наверх для сайта быстро и без знаний языка программирования jQuery и CSS, необходимо воспользоваться простой установкой плагина для движка WordPress — WPFront Scroll Top.

Вам просто-напросто нужно забить в поиске новых плагинов своей админки его название и он обнаружится автоматически. Также и установка этого плагина будет не проблемой. Вам нужно нажать на кнопку «Установить», а затем «Активировать»:

плагин WP
плагин WP

Настройка плагина WPFront Scroll Top довольно проста и к тому же он обладает огромным набором кнопок «НАВЕРХ» для вашего сайта. Вот убедитесь сами:

плагин WPFront Scroll Top
плагин WPFront Scroll Top

Что касается настройки плагина WPFront Scroll Top? Сейчас расскажу про самые основные моменты …

А лучше покажу видео — установка и настройка плагина WPFront Scroll Top:

Как сделать кнопку наверх для сайта плагином WPFront Scroll Top? Смотри!


Теперь идем дальше и давайте узнаем, как можно при помощи jQuery и CSS создать на своем сайте замечательные кнопки «НАВЕРХ» …

Создаем кнопку для сайта «НАВЕРХ» на jQuery и CSS!

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

Вот примерная картинка самой кнопки «наверх»:

icon_top
icon_top

Но Вы сможете изменить эту картинку на свою в любое время!

Также нужен код jQuery и CSS, которые являются основными элементами в построении кнопки наверх для сайта. Вот этот код:

  • Для вызова кнопки «наверх» после основного контента вашей страницы сайта или перед тегом </body> размещаем следующий HTML код:
<a href="#" class="scrollup">Наверх</a>
  •  Теперь нужно подключить библиотеку JQuery и для этого между тегами <head>…</head> вставляем вот такой код:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  •  После подключения библиотеки JQuery Вам необходимо вставить вот такой код JQuery:
<script type="text/javascript"> $(document).ready(function(){  $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } });  $('.scrollup').click(function(){ $("html, body").animate({ scrollTop: 0 }, 600); return false; }); }); </script>
  •  Теперь подключим 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; }

Вот теперь можно посмотреть, что из этого получилось: КНОПКА «НАВЕРХ» НА jQuery и CSS

На этом заканчиваю свой рассказ сегодня! Всем спасибо за внимание! Удачи и успехов в создании Вашей собственной кнопки наверх для сайта!

До новых встреч!

pribylwm.ru

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

Можно сделать плавающую кнопку «наверх» на чистом javascript без использования сторонних библиотек. Стили берём из предыдущего примера. Скрипт и код копируем в любое место шаблона.

  <script>   var smoothJumpUp = function() {   if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {   window.scrollBy(0,-50);   setTimeout(smoothJumpUp, 20);   }   }      window.onscroll = function() {   var scrolled = window.pageYOffset || document.documentElement.scrollTop;   if (scrolled > 100) {   	document.getElementById('upbutton').style.display = 'block';   } else {   	document.getElementById('upbutton').style.display = 'none';   }   }  </script>    <a id="upbutton" href="#" onclick="smoothJumpUp(); return false;">   <img src="/images/up.png" alt="Top" border="none" title="Наверх">  </a>     

Первая функция отвечает за автоматическое перемещение к началу страницы, а вторая — за показ и скрытие кнопки в зависимости от положения прокрутки.

Что делать, если кнопка «наверх» не работает

Если кнопка не отображается, то измените в стилях свойство «display: none;» на «display: block;» и проверьте, появится ли она. Нет? Значит проблема в неправильном пути к изображению или код размещён в неподходящем месте. Попробуйте разместить его перед закрывающимся тегом «body».

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

  <script type="text/javascript">   window.onload = function () {   //здесь скрипт   }  </script>  

Это позволит выполнить скрипт после загрузки всей страницы. Не помогло? Пиши в комментариях и постараемся найти проблему вместе.

realadmin.ru

Подключаем кнопку наверх к нашему сайту

   

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

 

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

 

Копируем и вставляем между тегами <head> <⁄head> тегами и следующий код:

 

<script GARBAGE>

  

На Joomla 3 например, JQuery входит в состав пакета и подключается автоматически.

Посмотреть и скачать последнюю версию JQuery можно с официального сайта — http://jquery.com/

Так мы подключили JQuery, теперь нужно разместить скрипт работы кнопки перед тегом </head> или так же можно вынести его в отдельный файл и подключить:

<script type="text/javascript">  jQuery(document).ready(function() {  jQuery("#back-top").hide();  jQuery(function () {  jQuery(window).scroll(function () {  if (jQuery(this).scrollTop() > 1000) {  jQuery('#back-top').fadeIn();  } else {  jQuery('#back-top').fadeOut();  }  });  jQuery('#back-top a').click(function () {  jQuery('body,html').animate({  scrollTop: 0  }, 750);  return false;  });  });  });  </script>

  

Данный код работает на Joomla 3, но в безопасном режиме JQuery — noConflict.

Если код у вас JQuery работает в обычно режиме, то в коде заменить «JQuery» на значок доллара «$»:

 

<script type="text/javascript">  jQuery(document).ready(function($) {  $("#back-top").hide();  $(function () {  $(window).scroll(function () {  if ($(this).scrollTop() > 1000) {  $('#back-top').fadeIn();  } else {  $('#back-top').fadeOut();  }  });  $('#back-top a').click(function () {  $('body,html').animate({  scrollTop: 0  }, 750);  return false;  });  });  });  </script>

 

Не закрывая наш файл шаблона, сразу размещаем html код самой кнопки, лучше это сделать в самом конце, перед тегом </body>:

 

<p id="back-top">  <a href="#top">  <span class="glyphicon glyphicon-arrow-up">Наверх</span>  </a>  </p>

 
И чтобы придать стиль кнопке, копируем стили в свой css файл сайта:

 

#back-top {  position: fixed;  bottom: 300px;  right: 20%;  z-index:999;  }    #back-top a{  display: block;  text-align: left;  font: 16px/100% Verdana !important;  text-decoration: none;  color: #fff;  /* background color transition */  -webkit-transition: 1s;  -moz-transition: 1s;  transition: 1s;  padding: 10px 15px 10px 10px;  border-radius: 10px;  background: green;   }    #back-top a:hover {  background: #aaa;  color: #000;  }

 

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

 

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

 

alexfine.ru

.cd-top {  
background-color: rgb(51, 122, 183);  
bottom: 0px;  
color: rgb(255, 255, 255);  
display: inline-block;  
font-size: 18px;  
line-height: 24px;  
position: fixed;  
opacity: 0;  
right: 0px;  
text-align: center;  
text-decoration: none;  
-webkit-transform: scale(5) translate(47px,-10px);  
-moz-transform: scale(5) translate(47px,-10px);  
-o-transform: scale(5) translate(47px,-10px);  
-ms-transform: scale(5) translate(47px,-10px);  
transform: scale(5) translate(47px,-10px);  
-webkit-transition: all 0.3s ease-in-out;  
-moz-transition: all 0.3s ease-in-out;  
-o-transition: all 0.3s ease-in-out;  
-ms-transition: all 0.3s ease-in-out;  
transition: all 0.3s ease-in-out;  
visibility: hidden;  
white-space: nowrap;  
width: 100%;  
}  
.cd-top.cd-is-visible, .no-touch .cd-top:hover {  
-webkit-transition: all 0.3s ease-in-out;  
-moz-transition: all 0.3s ease-in-out;  
-o-transition: all 0.3s ease-in-out;  
-ms-transition: all 0.3s ease-in-out;  
transition: all 0.3s ease-in-out;  
}  
.cd-top.cd-is-visible {  
opacity: 0.9;  
-webkit-transform: scale(1) translate(0px,0px);  
-moz-transform: scale(1) translate(0px,0px);  
-o-transform: scale(1) translate(0px,0px);  
-ms-transform:scale(1) translate(0px,0px);  
transform: scale(1) translate(0px,0px);  
visibility: visible;  
}  
.cd-top.cd-is-visible:hover {  
color: rgb(255, 255, 255);  
opacity: 1;  
}  
.cd-top:hover {  
text-decoration: none;  
}  
.cd-top .fa {  
padding: 25px 25px;  
}  
.cd-top span:last-child {  
padding: 25px 8px;  
}  
@media (min-width: 768px) {  
.cd-top {bottom: 90px;  
width: auto;  
right: -158px;  
}  
.cd-top:hover {  
right: 0px;  
}  
.cd-top .fa {  
border-right: 1px solid rgb(71, 142, 203);  
}  
}

zornet.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector