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

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

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

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

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

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

Этот пункт маленько творческий, можете сами найти в интернете изображение, либо нарисовать, либо оставить исходное, главное сохранить название 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. А вот теперь то отличие от других статей. Если вам не удастся сделать, то я совершенно бесплатно вам внедрю ее в ваш шаблон, мне не трудно, если что пишите в комментарии.