1 Topic by Xakker

Topic: Кнопки вверх и вниз для прокрутки страницы

Недавно подключил себе кнопки вниз и вверх для быстрой прокрутки страницы. Вот как я ее установил.
Подключение кнопок вверх и вниз.
1. Создаем 2 кнопки up.png и down.png в папке /images/ и подключаем.

Для этого в футер необходимо добавить:  

<a style='position: fixed; bottom: 76px; right: 10px; cursor:pointer; display:none;'
 id='Top'>
  <img src="http://ваш_сайт/images/up.png" alt="Вверх" title="Вверх">
</a>
<a style='position: fixed; bottom: 30px; right: 10px; cursor:pointer; display:none;'
id='Bottom'>
  <img src="http://ваш_сайт/images/down.png" alt="Вниз" title="Вниз">
</a>

Координаты кнопок настраиваются в position: fixed 

bottom: 76px; // кнопка распологается на высоте 76рх по отношению к низу страницы
right: 10px; //на 10рх с правой стороны экрана

2. Добавляем в папку с JS скрипт up-and-down.js

jQuery(function(){
  $("#Top").hide().removeAttr("href");
  if ($(window).scrollTop()>="200") $("#Top").fadeIn("slow")
  $(window).scroll(function(){
  if ($(window).scrollTop()<="200") $("#Top").fadeOut("slow")
  else $("#Top").fadeIn("slow")
  });

  $("#Bottom").hide().removeAttr("href");
  if ($(window).scrollTop()<=$(document).height()-"999") $("#Bottom").fadeIn("slow")
  $(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#Bottom").fadeOut("slow")
  else $("#Bottom").fadeIn("slow")
  });

  $("#Top").click(function(){
  $("html, body").animate({scrollTop:0},"slow")
  })
  $("#Bottom").click(function(){
  $("html, body").animate({scrollTop:$(document).height()},"slow")
  })
});

3. Подключаем в хэдер вызов библиотеки QJuery и up-and-down.js

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script type='text/javascript' src='http://сайт/js/up-and-down.js'></script>

Для установки кнопки вверх без JQuery, нужно добавить в футер вот этот код:

<a style='position:fixed; display:none; bottom:20px; right:10px; cursor:pointer;' id="top" >
<img src="http://ваш_сайт/images/up.png" /></a>
<script type="text/javascript">
window.onload = function() {
  var goTop = document.getElementById('top');
  goTop.onclick = function() {
    window.scrollTo(0,0);
  };
  window.onscroll = function () {
    if ( window.pageYOffset > 0 ) {
      goTop.style.display = 'block';
    } else {
      goTop.style.display = 'none';
    }
  };
};
</script>

Xakker's Website

2 Reply by pervik

Re: Кнопки вверх и вниз для прокрутки страницы

Xakker, посмотрел у Вас на сайте - отличные кнопочки!
Хотел бы предложить еще один вариант установки таких кнопочек, но без добавления изображений.
Возможно, что сработают не во всех браузерах, в хроме и эксплороре) работают без проблем.
Вот как это делается:
Редактируем всего 2 файла main.tpl и min.css  Оговорюсь, что работаю с шаблоном Oxygen и как будет на других шаблонах - не знаю.
В файле main.tpl  добавляем между <head> и </head> такой скрипт

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
   else $("#ToTop").fadeIn("slow")
 });

 if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
   else $("#OnBottom").fadeIn("slow")
 });

 $("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
 $("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>

а перед </body> такой код:

<div class="go-up" title="Вверх" id='ToTop'>⇧</div>
<div class="go-down" title="Вниз" id='OnBottom'>⇩</div>


сохраняем файл, должны появиться стрелочки, применяются спецсимволы юникода, которые просто копируются и вставляются внутри тега.
Далее останется преобразить эти стрелочки в красивые кнопочки.
Открываем файл Oxygen.min.css и всталяем такой код, который потом можно редактировать по своему усмотрению

.go-up, .go-down {
 display: none;
 position: fixed; /*позиционирование*/
 z-index: 9999; /*поверх все элементов на странице*/
 right: 2%; /*положение на странице, если слева - left*/
 background: #4F4F4F;
 border: 1px solid #ccc;
 border-radius: 5px;
 cursor: pointer;
 color: #fff;
 text-align: center;
 font: normal normal 42px/42px sans-serif;
 text-shadow: 0 1px 2px #000;
 opacity: .5;
 padding: 3px;
 margin-bottom: 5px;
 width: 42px;
 height: 42px;
}
.go-up { bottom: 360px; }
.go-down { bottom: 310px; }
.go-down:hover,
.go-up:hover {
 opacity: 1;
 box-shadow: 0 5px 0.5em -1px #666;
}

Должно все получиться! У меня это выглядит так
Прошу сильно не пинать... если что)

3 Reply by Xakker

Re: Кнопки вверх и вниз для прокрутки страницы

Отлично! Я вот думаю, может написать расширение для punBB Кнопочки Вверх и Вниз? Такого еще вроде нет... есть только кнопка вверх.
pervik, хорошо придумано по центру, ведь удобно пользоваться на ПК, а вот интересно как на планшетах и смартфонах, удобно?

Xakker's Website