Кнопка вверх для сайта (HTML, CSS, jQuery)

· HTML & CSS, JavaScript и Блог · 4 мин чтения

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

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

Я рассмотрю два варианта использования скрипта:

  1. На обычного сайте
  2. Кнопка наверх для 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. Проверка

  1. Проверьте правильность выполнения всех этапов
  2. Все ли вы загрузили обратно на сайта

На этом все, пользуйтесь!

Если у вас есть какие-то вопросы, то вы можете задать их внизу в комментарии.

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

Кнопка наверх для сайта (HTML, CSS, jQuery) от bologer