Тестовик

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

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

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

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

Страница: 1 2  

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

1

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

Цветные стрелки

HTML низ

Код:
<!--стрелочки для пролистывания страницы вверх-вниз--> 
<div style="position: fixed; width: 75%; bottom: 0">
  <a style="position: absolute; bottom: 200px; right: -83px; cursor: pointer; z-index: 100; background-color: transparent !important;" id="Go_Top">
    <img style="height:30px;" src="https://forumstatic.ru/files/0018/fd/28/77286.png" alt="Вверх" />
  </a>
  <a style="position: absolute; bottom: 160px; right: -83px; cursor: pointer; z-index: 100; background-color: transparent !important;" id="Go_Bottom">
    <img style="height:30px;" src="https://forumstatic.ru/files/0018/fd/28/27642.png" alt="Вниз" />
  </a>
</div>
<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()-$(window).height()},"slow")
})
});
</script>

Пример - здесь.

Вид стрелок:

https://forumstatic.ru/files/0018/fd/28/77286.png
https://forumstatic.ru/files/0018/fd/28/27642.png

0

2

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

Серые стрелки

Код:

<!--кнопки вверх вниз-->
<div class="go-up" id='ToTop'><img src="https://s9.uploads.ru/ZoSUi.png" border="0" width=100%/></div>
<div class="go-down" id='OnBottom'><img src="https://s9.uploads.ru/7ilTu.png" 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>

Вид стрелок:

https://s9.uploads.ru/7ilTu.png

0

3

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

Старинные стрелки

Код:
<!--============КНОПКИ ВВЕРХ ВНИЗ!!!=======================-->

<!--####### НАЧАЛО Скрипт КНОПКИ ВВЕРХ ВНИЗ!!! #######-->

<div class="go-up" id='ToTop'><img src="https://forumstatic.ru/files/0019/f3/f4/54144.png" border="1px" width=100%/></div>
<div class="go-down" id='OnBottom'><img src="https://forumstatic.ru/files/0019/f3/f4/28547.png" border="1px" width=100%/></div>
<style>
.go-up,.go-down {
display:none;
position:fixed; /*позиционируем*/
right:5px; /*указываем положение, если слева - left*/
z-index:9999; /*показываем поверх все элементов на странице*/
cursor:pointer;
opacity:10; /*прозрачность*/
margin-bottom:5px; /*отступ снизу (можно не указывать)*/
width:60px; /*ширина кнопки*/
height:75px; /*высота кнопки*/
}
.go-up {
bottom:55%; /*положение от низа окна браузера верхняя кнопка*/
}
.go-down {
bottom:40%; /*положение от низа окна браузера нижняя кнопка кнопка*/
}
.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>

<!--####### КОНЕЦ Скрипт КНОПКИ ВВЕРХ ВНИЗ!!! #######-->



<!--==========================================================================================================-->

Вид стрелок:

https://forumstatic.ru/files/0019/f3/f4/28547.png

0

4

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

Прозрачные стрелки

Код:
<!--кнопочки вверх вниз-->
    <style>
    .go-up,.go-down {
    padding:0;
    margin:0px;
    display:block;
    background-color:transparent;
    outline: none 0 transparent;
    border:none 0 transparent;
    border-radius:10px;
    cursor:pointer;
    text-align:center; /*выравнивание*/
    opacity: .7; /*прозрачность*/
    width:66px; /*ширина кнопки*/
    height:74px; /*высота кнопки*/
    }
    /*при наведении курсора*/
    .go-down:hover,.go-up:hover {
    opacity:1;
    }
    #wrp-butt{
    overflow:hidden;
    position:fixed; /*позиционируем*/
    z-index:9999; /*показываем поверх всех элементов на странице*/
    right:25px; /*указываем положение, если слева - left*/
    bottom:110px; /*положение от низа окна браузера*/
    }
    </style>
    <div id=wrp-butt>
    <button class="go-up" id="ToTop" onmousedown="$('html,body').animate({scrollTop:0},{ 'duration': 1000, 'easing':'linear' });$(this).css({'margin':'1px -1px -1px 1px'});" onmouseup="$('html,body').stop(true);$(this).css({'margin':'0'})">
    <img src="https://forumstatic.ru/files/0013/1f/fe/75260.png" alt="вверх" style="vertical-align: middle">
    </button>
    <button class="go-down" id="OnBottom" onmousedown="$('html,body').animate({scrollTop:$(document).height()},{ 'duration': 1000, 'easing':'linear' });$(this).css({'margin':'1px -1px -1px 1px'});" onmouseup="$('html,body').stop(true);$(this).css({'margin':'0'})">
    <img src="https://forumstatic.ru/files/0013/1f/fe/13168.png" alt="вниз" style="vertical-align: middle">
    </button></div>


    <style type="text/css">
    #button-justify { background:url(https://forumstatic.ru/files/0013/1f/fe/47132.png) center no-repeat!important;}
    </style>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#post #button-center").after('<td id=button-justify align=center valign=center title="Выравнивание по ширине"><img onclick="bbcode(\'[align=justify]\',\'[/align]\')" src="/i/blank.gif"/></td>');});
    </script>

Пример - здесь.

Вид стрелок:

https://forumstatic.ru/files/0013/1f/fe/13168.png

Данный скрипт работает только для десктопа. Для мобильной версии скрипт нужно подправить.

0

5

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

Прокрутка страницы

Код:
<!-- Прокрутка страницы -->
<!-- Кнопки вверх-вниз © Домовой -->
<div class="go-up" id='ToTop'><div class="inside"><img src="/files/001a/fc/45/61081.svg"></div></div>
<div class="go-down" id='OnBottom'><div class="inside"><img src="/files/001a/fc/45/61081.svg"></div></div>
<script type="text/javascript">
$(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("fast")
$(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("fast")
  else $("#ToTop").fadeIn("fast")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("fast")
$(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("fast")
  else $("#OnBottom").fadeIn("fast")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"fast")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"fast")})
});
</script>
<!-- конец прокрутки -->

Пример - здесь.

0

6

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

Золотые стрелочки

Код:
<!-- Cтрелочки -Вверх вниз страницы -->
<div style="position:fixed;z-index:1003; right :0.4%; bottom: 45%;">
<a href="#top" onclick="window.scrollTo(0,0); return false;" title="Вверх страницы">
<img src="http://sd.uploads.ru/vYTwX.png" alt="Вверх страницы"/>
</a>
<br/>
<br/>
<a href="#top" onclick="window.scrollTo(0, document.body.scrollHeight); return false;" title="Вниз страницы">
<img src="https://forumstatic.ru/files/000f/9c/c7/39028.png?v=1" alt="Вниз страницы"/>
</a>
</div><!--Конец Cтрелочки -->

Источник

Вид стрелок:

http://sd.uploads.ru/vYTwX.png
https://forumstatic.ru/files/000f/9c/c7/39028.png?v=1

0

7

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

Круглые фиолетовые кнопочки

Код:
<!------------------------------------------------------------------------------------------------------------------------>
<!--кнопки вверх вниз-->
<div class="go-up" id='ToTop'><img src="https://img.icons8.com/?size=48&id=X0azPa7Q2toW&format=png" border="0" width=100%/></div>
<div class="go-down" id='OnBottom'><img src="https://img.icons8.com/?size=48&id=63266&format=png" 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>

Источник

Вид кнопок:

https://img.icons8.com/?size=48&amp;id=63266&amp;format=png

0

8

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

Стилизованные кнопки вверх/вниз

Код:
<!-- стилизованные кнопки вверх/вниз © ForumD.ru, Gerda -->
<div class="scrollbuttons"><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").addClass("show")
$(window).scroll(function(){
 if ($(window).scrollTop()<="250") $("#ToTop").removeClass("show")
 else $("#ToTop").addClass("show")
  });
 if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").addClass("show")
  $(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").removeClass("show")
     else $("#OnBottom").addClass("show")
 });
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>

Источник

Кнопки выглядят как звёздочки.

0

9

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

Зелёные стрелки

Код:
<!--кнопочки вверх вниз-->
<style>
.go-up,.go-down {
padding:0;
margin:0px;
display:block;
background-color:transparent;
outline: none 0 transparent;
border:none 0 transparent;
border-radius:10px;
cursor:pointer;
text-align:center; /*выравнивание*/
opacity: .9; /*прозрачность*/
width:30px; /*ширина кнопки*/
height:50px; /*высота кнопки*/
}
/*при наведении курсора*/
.go-down:hover,.go-up:hover {
opacity:1;
}
#wrp-butt{
overflow:hidden;
position:fixed; /*позиционируем*/
z-index:9999; /*показываем поверх всех элементов на странице*/
right:5px; /*указываем положение, если слева - left*/
bottom:410px; /*положение от низа окна браузера*/
}
</style>
<div id=wrp-butt>
<button class="go-up" id="ToTop" onmousedown="$('html,body').animate({scrollTop:0},{ 'duration': 1000, 'easing':'linear' });$(this).css({'margin':'1px -1px -1px 1px'});" onmouseup="$('html,body').stop(true);$(this).css({'margin':'0'})">
<img src="https://s9.uploads.ru/KDVJL.gif" alt="вверх" style="vertical-align: middle">
</button>
<button class="go-down" id="OnBottom" onmousedown="$('html,body').animate({scrollTop:$(document).height()},{ 'duration': 1000, 'easing':'linear' });$(this).css({'margin':'1px -1px -1px 1px'});" onmouseup="$('html,body').stop(true);$(this).css({'margin':'0'})">
<img src="https://s9.uploads.ru/0defj.gif" alt="вниз" style="vertical-align: middle">
</button></div>

Источник

Вид стрелки:

https://s9.uploads.ru/0defj.gif

0

10

  • Автор: Тестер
  • Администратор
  • Тестер
  • Зарегистрирован: 9 Апр 2021
  • Приглашений: 0
  • Сообщений: 544
  • Уважение: +0
  • Позитив: +0
  • Провел на форуме:
    9 дней 8 часов
  • Последний визит:
    Вчера 18:20:03
Код:
<!-- Кнопка прокрутки вверх -->
<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//-Кнопка прокрутки вверх -->

Источник

Здесь всего одна кнопка вверх и она квадратная. А на ЕФП - тоже так, но кнопка круглая.

0

Страница: 1 2  

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

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