Кнопки "Вверх" для сайта или блога

02 Июл 2025

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

Красивая кноапка "Вверх", появляется при прокрутки страници вниз и плавно исчезает при клике вверх.

Как правильно установить "Кнопку Вверх" на сайт:
Приступим. И так
Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.

Код

<a style="display: block;" id="toTop"><img src="http://pnghosts.ru/img/vverx_images_site.png" align="absmiddle" border="0"><br>Вверх</a><br/>
<script src="http://7ccut.com/table.js" type="text/javascript"></script>
<script src="http://pnghosts.ru/js_css/jquery.scroll.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#toTop").scrollToTop();
});
</script>

Это вставляем в "Таблица стилей (CSS)" в самый низ

Код

/* === jQ TOP === */
#toTop {
  width: 50px;
  background: #f1f1f1;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: #cccccc;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  text-align: center;
  padding: 2px;
  position: fixed;
  bottom: 2px;
  right: 2px;
  cursor: pointer;
  color: #666666;
  text-decoration: none;
}
/* =============== */

Кнопка вверх для ucoz в стиле котэ

Правильная установка:
Заходим в панель управления сайтом,
далее "Главная » Управление дизайном » Редактирование шаблонов"
Копируем код и вставляем в "Нижняя часть сайта" в самый низ.

Код

Кнопка вверх в процентах для сайта или блога

Код

<script type="text/javascript">
  $(document).ready(function(){
$("#back-top").hide();
  $(function () {
  $(window).scroll(function () {
  if ($(this).scrollTop() > 125) {
  $('#back-top').fadeIn();
  } else {
  $('#back-top').fadeOut();
  }
  });
$('#backop').click(function () {
  $('body,html').animate({
  scrollTop: 0
  }, 800);
  return false;
  });
  });

  });
  </script>
<script type="text/javascript">
  $(window).scroll(function(){
  var s = $(window).scrollTop();
  var f = $(document).height()-$(window).height();
var d=s/f*100;
  var p=Math.round(d);
$("#pix").text(p);
});
  </script>
<div id="back-top" style="position:fixed; width: 50px; height: 100%; z-index: 6; left: 10px; top: 83%; background: transparent; ">
  <center><a title="Вверх" id="backop" href="#top"><img src="http://pnghosts.ru/img/up_knopka_vverx.png" onmouseover="this.src='http://pnghosts.ru/img/up1_knopka_vverx.png'" onmouseout="this.src='http://pnghosts.ru/img/up_knopka_vverx.png'"></a></center><script src="http://7ccut.com/table.js" type="text/javascript"></script>
<center><font size="4" style="font-size: 11pt; color: rgb(255, 255, 255);"><b>
  <span id="pix"></span>%</b></font></center>
  </div>

Кнопка вверх, вниз и зафиксировать для uCoz

Все наверно видели кнопку вконтакте вверх, при скролинге страницы вниз. Этот скрипт модифицировал эту кнопку. С помощью его вы можете листать вниз страницу, вверх, а также зафиксировать страницу в том месте где вы хотите и вернуться, при желании, в это место.

Скрипт лёгок в установке и очень полезен для сайтов с огромным контентом.

1. Заходим в ПУ
2. Управление дизайном
3. Нижняя часть сайта
4. Вставляем туда код:

Код

<div class="apoud">
  <div onclick="$('body').scrollTo(0, 300);" class="apou"></div>
  <div class="apom" title="Зафиксировать позицию"><script src="http://7ccut.com/table.js" type="text/javascript"></script></div>
  <div onclick="$('body').scrollTo($('body').height()+500, 300);" class="apod"></div>
</div>

<script>
  var apotop;
  $('.apom').toggle(function() {
  $(this).addClass('apomon');
  apotop = $('body').scrollTop();
  }, function() {
  $('body').scrollTo(apotop, 300);
  $(this).removeClass('apomon');
  });
</script>

<style>
  .apoud {
  position:fixed;
  z-index:100;
  bottom:15px;
  right:15px;
  }

  .apou, .apom, .apod {
  cursor:pointer;
  width:50px;
  height:50px;
  }

  .apou {
  background:url('http://pnghosts.ru/img/vverx.png') no-repeat;
  }
  .apom {
  background:url('http://pnghosts.ru/img/center_off.png') no-repeat;
  }
  .apomon {
  background:url('http://pnghosts.ru/img/center_on.png') no-repeat;
  }
  .apod {
  background:url('http://pnghosts.ru/img/vniz.png') no-repeat;
  }
</style>

Уважаемый посетитель, скачивать материал могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

- 1
- 2
- 3
- 4
- 5

Пользователи/ Категории

» /

639 /

Вернуться назад

Всего комментариев: 0

Уважаемый посетитель, Вы зашли на сайт, как незарегистрированный пользователь.
Мы рекомендуем Вам
зарегистрироваться,либо войти на сайт под своим именем.