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

Как?

Как всегда на помощь пришёл интернет. Порывшись и попробовав разные методы реализации остановился на реализации посредством JavaScript и jQuery.
Сами кнопки тоже скачал с интернета и разместил в корне блога на хостинге.

Ну а теперь, как же всё таки

Сделать кнопку вверх вниз

Итак.

Первое что нужно будет сделать это прописать тип документа, чтобы скрипт работал без сбоев. Прописываем в файле (header.php) вот такие строчки:

1
2

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

или

1
2

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Что мне нравится в этом скрипте так это то что в самом верху блога появляется кнопка вниз. Затем когда пользователь начинает читать и спускается вниз появляются обе кнопки.
И уже когда пользователь в самом низу блога появляется кнопка наверх, а кнопка вниз исчезает. Мелочь, а интересно.

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

Чтобы получились такие эффекты от кнопок необходимо произвести не очень сложные манипуляции.
Это подключить jQuery, которая отвечает за плавную прокрутку и JavaScript который отвечает за прокрутку и появление и исчезновение кнопок.

Сначала подключим библиотеку jQuery.

Вставьте код, который видите ниже, опять же в страницу (header.php) перед закрывающим тегом /head:

1
2
3

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

На этом в (header.php) больше ничего не ставьте. Остальной код вставляйте в файл (footer.php) в самый низ перед закрывающим тегом /body.
Такая вставка не будет снижать загрузку основного контента блога и сами кнопки будут размещаться внизу блога.

Вот этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script type="text/javascript">
jQuery(function(){
 $("#Go_Top").hide().removeAttr("href");
 if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()< ="250") $("#Go_Top").fadeOut("slow")
  else $("#Go_Top").fadeIn("slow")
 });
 
 $("#Go_Bottom").hide().removeAttr("href");
 if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
  else $("#Go_Bottom").fadeIn("slow")
 });
 
 $("#Go_Top").click(function(){
  $("html, body").animate({scrollTop:0},"slow")
 })
 $("#Go_Bottom").click(function(){
  $("html, body").animate({scrollTop:$(document).height()},"slow")
 })
});
</script>

И далее ещё код который отвечает за размер кнопок, их размещение слева, справа или по центру.

1
2
3
4
5
6
7
8

<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
 <img src="image/go_up.png" alt="Наверх" title="Наверх"/>
</a>
<a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
 <img src="image/go_bottom.png" alt="Вниз" title="Вниз"/>
</a>

Вместо –

1

image/go_up.png

впишите адрес своего блога и где находятся картинки кнопок. Например вот так:

1

http://gertc.com/verh.png

Изображения кнопок можно нарисовать самому или скачать с интернета. Их огромное количество на любой вкус и размер.

Всё. Сделать кнопки оказалось не так и сложно…

ПыСы:

В кодах уберите звёздочки – *, перестал работать плагин отображения кода…

ПыСыПыСы:

Вроде исправил, теперь не надо никакие звёздочки удалять…