При прочтении длинных статей или блогов — хочется быстро вернуться наверх сайта, при этом не прилагая никаких усилий.
Для этого есть «кнопка наверх», которая позволяет при нажатии вернет вас на верх сайта автоматически с красивой анимацией. Конкретно в этой статье я расскажу как сделать кнопку наверх на вашем сайте.
Я рассмотрю два варианта использования скрипта:
- На обычного сайте
- Кнопка наверх для WordPress
Подробнее — смотрите ниже.
1. На обычном сайте
Допустим, у вас есть обычная HTML страничка.
1.1. jQuery
Поставим jQuery библиотеку, если у вас ее нет не сайте. Есть есть, то продолжайте со второго шага.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
Это нужно вставить между <head></head> вашей html страницы.
Или вы можете скачать jquery-1.11.3.min.js и jquery-migrate-1.2.1.min.js. И установить путь до места куда вы их кинули.
1.2. Плавная анимания вверх
Изначальная функция была взята с https://goo.gl/WioFKw. После чего была немного изменена, чтобы встретить нужные требования.
Что делает данная функция? Она позволяет указываю в ссылке href="#todiv"
плавно перемещать экран до <div>
, который будет иметь id="todiv"
.
<script> function scrollToDiv() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } } }); } $(document).load(function() { scrollToDiv(); }); </script>
Внимание! Код, который указан выше нужно добавить между <head></head>
после jQuery.
3. Скрипт кнопки
В целом все закомментировано в самом скрипте. Хочу обратить внимание на данную строку: if( $(window).scrollTop() >= 600)
она означает, если с самого верха экрана уже больше или равно 600 пикселям, то «кнопка вверх» будет показана. Вы можете поменять цифру на какую пожелаете — как вам будет удобно.
<script> $(function() { $(window).on('scroll', function() { if( $(window).scrollTop() >= 600) { $('body').attr('id', 'gotop'); if( !$('.gototop').length ) { // Создаем ссылку, которая будет работать как кнопка возрата пользователя наверх сайта // Наверх можно поменять на кнопку или любое другое название // Так же вместо style="", можно привязаться все атрибуты стилей к классу .gototop $('body').append('<a href="#gotop" class="gototop" style="position: fixed; right: 10px; bottom: 10px; background-color: #fff; display: block; padding: 5px 10px;">Наверх</a>'); scrollToDiv(); // Вызываем функцию, которая делали между <head></head> } } else { // Убираем нашу ссылку и когда анимация заканчивается удалаем ее совсем $('.gototop').fadeOut(600, function() { $(this).remove() }); } }); }); </script>
Внимание! Данный код можно вставить перед </body>
.
2. Кнопка наверх для WordPress
В целом процесс один и тот же. Единственное в движке немного посложнее для новичков, но я помогу и скажу как все правильно установить.
2.1. jQuery
По стандарту, WordPress имеет собственный встроенный скрипт jQuery, поэтому устанавливать данная часть не нужно. НО, если у вас в конце получится так, что не работает отображение кнопки или что-то работает не корректно, то следуйте следующим указания:
Используйте скрипт из 1.1, зайдите на ftp вашего сайта или через админку.
Через ftp примерно такое путь: ваш домен/public_html/wp-content/themes/название вашей темы/
.
Через админку: зайдите в нее http://ваш домен/wp-admin/
, после чего слева найдите «Внешний вид» и там нужно выбрать «Редактор».
Внимание! После чего нужно найти файл header.php
и между <head></head>
вставить скрипт из 1.1.
2.2. Плавная анимания вверх
Повторите этап 1.2, только в файле header.php, после того места где вставили jQuery.
2.3. Скрипт кнопки
Повторите этап 1.3, только найдите файл footer.php и вставьте туда код.
3. Проверка
- Проверьте правильность выполнения всех этапов
- Все ли вы загрузили обратно на сайта
На этом все, пользуйтесь!
Если у вас есть какие-то вопросы, то вы можете задать их внизу в комментарии.
Демо этой кнопки можно посмотреть на этом сайте. Когда вы спускаетесь вниз, то слева в нижнем углу появляется кнопка «Наверх», которая работает по такомуже сценарию как описывалось выше.
Кнопка наверх для сайта (HTML, CSS, jQuery) от bologer