Самая простая кнопка вверх для сайта без плагина

Дата: / Автор поста:


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

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

Содержание.

  1. Закачиваем.
  2. Вводим HTML.
  3. Вставляем стили.
  4. Загружаем сам скрипт.

Загрузка самой картинки.

Перед всяким изменением и загрузками, делаем резервные копии файлов!

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

Этот пункт маленько творческий, можете сами найти в интернете изображение, либо нарисовать, либо оставить исходное, главное сохранить название arrow_to_top.png (на скриншоте показано), и размер 50 на 50 пикселей, но об этом будем говорить позже.

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

Делаем вывод изображения.

Тут будет затруднительный пункт, опять повторюсь, что темы у всех разные, но добавлять в 99% случав будем в footer.php, потому как это самая крайняя нижняя точка блога, ниже не куда. Идем в footer.php и вставляем туда вот этот код (для информации, в админпанели «внешний вид»-"редактор"- и в правой колонке «footer.php»).

<img id="to_top" src="<?php echo get_template_directory_uri(); ?>/images/arrow_to_top.png" style="display: block;"/>

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

Добавляем стили и классы.

А теперь как по накатанной, идем в style.css, и добавляем в самый низ вот этот код, он отвечает за внешний вид.

#to_top{
position: fixed;
cursor: pointer;
bottom: 24px;
width: 50px;
height: 50px;
margin-left: 1000px;
}

Если у вас получилось вот так как на снимке ниже, то просто берете и меняете значение margin-left, оно дает отступ слева, то есть чем цифра больше, тем и кнопка находиться дальше, я выставил на расстоянии 1300px. Вкусы разные, но я люблю, чтобы она была вынесена за пределы контента.

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

Скрипт для плавной прокрутки.

Опять нам понадобится footer.php, открываем его и в самый низ перед закрывающим тегом body вставляем данный скрипт.

<script type="text/javascript">
jQuery.noConflict();
(function( $ ) {
  $(function(){
      $.fn.scrollToTop=function(){
          $(this).hide();
          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},900)
          })
      }
    });
  $(document).ready(function(){
    $("#to_top").scrollToTop();
  });
})(jQuery);
</script>

Так это выглядит наглядно.

Не забываем сохранять изменения.

И на этом все, если сделано правильно, то кнопка вверх для вашего сайта порадует вас своим функционалом

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 4.8 из 5)

С уважением к читателям Лифанов Валентин.

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

Комментарии к этой супер статье.

  • Валерий

    Привет Валентин, у тебя на блоге кнопка вверх не работает почему то.

    • Лифанов Валентин

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

  • Андрей

    Валентин, спасибо, теперь у меня кнопка без плагина. Снес плагин)))

    • Лифанов Валентин

      Пожалуйста, рад был помочь.

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

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

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.