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

Чтобы реализовать следующий код, необходимо познакомится (если вы еще не слышали) с такими понятиями как JavaScript и jQuery. Страшно стало? Не бойтесь. Это лишь слова обозначающие специальные подключаемые библиотеки для работы сайта. Хм… Давайте я не буду углубляться в определения. Скажу лишь, что их использование помогает привнести живости в самые скучные элементы дизайна и функционала сайта. В ближайшее время я планирую подсесть на них более плотно, а заодно и вас подсадить ;) .

Так вот. Для удобства хочу посоветовать вставлять следующие участки кода друг за другом в файл footer.php перед тэгом </body>.

Для начала необходимо подключить библиотеку  jQuery с помощью данного кода:

<script language="JavaScript" type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

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

<script language="JavaScript" type="text/javascript">
$(function() {
 $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
   if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
   else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
   $("html, body").animate({scrollTop: 0}, "slow")
  })
 }
});

$(function() {
 $("#Go_Top").scrollToTop();
});
</script>

И только после всего этого вставляем саму кнопку. Тут берется простая картинка на ваш выбор и подключается к функции, описанной выше.

<a style='position: fixed; bottom: 25px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
 <img src="http://ваш-сайт.ru/wp-content/themes/ваша-тема/images/ваш-файл.png" alt="Наверх" title="Наверх">
</a>

Разумеется вы поняли, что слова «ваш-сайт», «ваша-тема» и «ваш-файл» нужно заменить на соответствующие.

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

Про правильное строительство загородного дома и сколько стоят материалы для строительства на сайте campingmanitoulin.com

От Val

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

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