Тестовик

Меню навигации

Пользовательские ссылки

Активные темы

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Тестовик » Украшение форума » Стрелочки вверх-вниз

Стрелочки вверх-вниз

Страница: « 1 2

Сообщений 11 страница 20 из 20

Поделиться1129 Ноя 2024 19:51:35

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

Код:

<!--------- КНОПКИ ВВЕРХ_ВНИЗ ------------->
<div class="topbot"><div class="go-up" id='ToTop'>▲</div>
<div class="go-down" id='OnBottom'>▼</div></div>
<!--кнопки вверх вниз-->
<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>

Источник и пример - здесь.

Поделиться122 Дек 2024 16:28:58

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

Код:

<!--кнопки вверх вниз-->
    <div class="go-up" id='ToTop'><img src="https://www.imageup.ru/img83/2954677/2uparrow1.png" border="0" width=100%/></div>
    <div class="go-down" id='OnBottom'><img src="https://www.imageup.ru/img83/2954678/2downarrow1.png" border="0" width=100%/></div>
    <style>
    .go-up,.go-down {
    display:none;
    position:fixed; /*позиционируем*/
    right:5px; /*указываем положение, если слева - left*/
    z-index:9999; /*показываем поверх все элементов на странице*/
    cursor:pointer;
    opacity:.9; /*прозрачность*/
    margin-bottom:300px; /*отступ снизу (можно не указывать)*/
    width:40px; /*ширина кнопки*/
    height:40px; /*высота кнопки*/
    }
    .go-up {
    bottom:105px; /*положение от низа окна браузера верхняя кнопка*/
    }
    .go-down {
    bottom:25px; /*положение от низа окна браузера нижняя кнопка кнопка*/
    }
    .go-down:hover,.go-up:hover {
    opacity:1;
    }
    </style>

 <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>

Источник и пример - здесь.

Вид стрелок:

Поделиться132 Дек 2024 16:51:51

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

Кнопки вверх и вниз страницы с плавной прокруткой и эффектом затухания
© Домовой

В конец HTML-верх или ближе к началу HTML низ

Код:

<!--кнопки вверх вниз-->
<div class="go-up" id='ToTop'><img src="ссылка на кнопку ВВЕРХ" border="0" width=100%/></div>
<div class="go-down" id='OnBottom'><img src="ссылка на кнопку ВНИЗ" border="0" width=100%/></div>
<style>
.go-up,.go-down {
display:none;
position:fixed; /*позиционируем*/
right:5px; /*указываем положение, если слева - left*/
z-index:9999; /*показываем поверх все элементов на странице*/
cursor:pointer;
opacity:.7; /*прозрачность*/
margin-bottom:5px; /*отступ снизу (можно не указывать)*/
width:30px; /*ширина кнопки*/
height:30px; /*высота кнопки*/
}
.go-up {
bottom:65px; /*положение от низа окна браузера верхняя кнопка*/
}
.go-down {
bottom:25px; /*положение от низа окна браузера нижняя кнопка кнопка*/
}
.go-down:hover,.go-up:hover {
opacity:1;
}
</style>
<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>

Есть несколько вариантов картинок кнопок.

Источник и примеры стрелок - здесь.

Также - здесь.

Поделиться142 Дек 2024 16:58:16

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

Кнопка вверх, как "В Контакте" (c) Fover

В Html-низ:

Код:

<script type="text/javascript">
$(document).ready(function() {
$('body').append('<div class="fover-up" style="display: none;opacity: 0.7;width: 80px;height:100%;position: fixed;left: 0px;top: 0px;cursor: pointer;text-align: center;line-height: 30px;color: #000;">&uarr; &uarr; &uarr;</div>');
   
$ (window).scroll (function () {if ($ (this).scrollTop () > 100) {$ ('.fover-up').fadeIn();} else {
$ ('.fover-up').fadeOut();
}
});
$('.fover-up').click(function(){$('body,html').animate({scrollTop: 0}, 800);
return false;
});
$('.fover-up').hover(function() {
$(this).animate({'opacity':'1',}).css({'background-color':'#E1E7ED','color':'#6a86a4'});}, function(){
$(this).animate({'opacity':'0.5'    }).css({'background':'none','color':'#E1E7ED'});;
});   
});
</script>

(Выделенное красным - цвет стрелочек #000.)

Источник

Поделиться158 Дек 2024 21:02:36

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

КНОПКА ВВЕРХ (как на ЕФП)

HTML-низ

Код:

<!-- Кнопка ВВЕРХ внизу -->
<style>
.scrollup{
	width:31px;
	height:30px;
	position:fixed;
	bottom:30px;
	right:35px;
	display:none;
	text-indent:-9999px;
	background:rgba(0,0,0,0.35) url(https://forumstatic.ru/files/0014/ef/99/34838.png) 7px 10px no-repeat;
	background-size:17px;
	transition:background-color 1s linear,transform 1s linear,opacity 0s linear!important;
	border-radius:50%;
	-moz-border-radius:50%;
	z-index: 99999;
}
.scrollup:hover{
	background-color:rgba(0,0,0,0.85);
	transition:background-color 1s linear,transform 1s linear,opacity 0 linear!important;
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
}
</style>
<a href="#" class="scrollup" title="Наверх">Наверх</a>
<script type="text/javascript">
$(document).ready(function(){
$('h1.title-logo span').wrapInner('<a href="https://forum.mybb.ru/" style="color:#fff;text-decoration:none;"></a>');
$(window).scroll(function(){if($(this).scrollTop()>100){$('.scrollup').fadeIn();}else{$('.scrollup').fadeOut();}});$('.scrollup').click(function(){$("html, body").animate({scrollTop:0},600);return false;});});
</script>
<!-- конец: Кнопка ВВЕРХ внизу -->

Источник и пример - здесь.

Теперь и на этом сайте.

Такая же кнопка на прямоугольная:

Код:

<!-- Кнопка прокрутки вверх -->
<style>
.ScrollToTop {
  display: none;
  position: fixed;
  right: 11px;
  bottom: 12px;
  width: 40px; 
  height: 40px; 
  background: rgba(0, 0, 0, 0.45) url(https://forumstatic.ru/files/0014/ef/99/34838.png) 6px 10px no-repeat;
  z-index: 10000;
  border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -o-border-radius: 5px;
  transition: background 0.5s ease;
    -webkit-transition: background 0.5s ease;
}
.ScrollToTop:hover {
  background-color: rgba(0, 0, 0, 0.65);
  transition: background 0.5s ease;
    -webkit-transition: background 0.5s ease;
}
</style>
<a href="#" class="ScrollToTop" title="Вверх"> </a>
<script type="text/javascript" src="https://forumstatic.ru/files/0014/ef/99/40861.js"></script>
<!-- //End//-Кнопка прокрутки вверх -->

Источник и пример - здесь.

Поделиться1613 Авг 2025 22:59:08

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

Синие большие стрелки:

Поделиться1728 Авг 2025 05:12:47

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

Жёлтые круглые стрелки:

Источник и пример - здесь.

Поделиться1828 Авг 2025 06:38:20

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

Зелёные листочки

Источник и пример - здесь.

Поделиться1929 Авг 2025 11:05:40

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

Тёмные треугольники

Поделиться2030 Авг 2025 16:59:03

Автор: Тестер
Администратор
Зарегистрирован: 9 Апр 2021
Приглашений: 0
Сообщений: 544
Уважение: +0
Позитив: +0
Провел на форуме:
9 дней 8 часов
Последний визит:
Вчера 18:20:03

Источник - здесь.

Страница: « 1 2

Вы здесь » Тестовик » Украшение форума » Стрелочки вверх-вниз

создать форум