Единый форум поддержки

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

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

Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Кнопка вверх как на этом сайте...

Кнопка вверх как на этом сайте...

Страница: 1

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

1

  • Автор: Геннадий Эдуардович
  • Заслуженный
  • Геннадий Эдуардович
  • Зарегистрирован: Чт, 13 Сен 2012
  • Сообщений: 742
  • Уважение: +87
  • Позитив: +313
  • Пол: Мужской
  • Последний визит:
    Ср, 26 Мар 2025 08:57:14

Хотелось бы иметь такую же кнопку вверх как на этом сайте... :tomato:

0

2

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 11704
  • Уважение: +8002
  • Позитив: +5702
  • Пол: Мужской
  • Последний визит:
    Сегодня 21:32:37

Геннадий Эдуардович
В HTML верх

<!--Кнопка Вверх-->
<a href="#" class="scrollup" title="Наверх">Наверх</a>
<script type="text/javascript">
$(document).ready(function(){
$(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>
.scrollup{
width:31px;
height:30px;
position:fixed;
bottom:30px;
right:35px;
display:none;
text-indent:-9999px;
background:rgba(0,0,0,0.35) url(/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>

+1

3

  • Автор: Геннадий Эдуардович
  • Заслуженный
  • Геннадий Эдуардович
  • Зарегистрирован: Чт, 13 Сен 2012
  • Сообщений: 742
  • Уважение: +87
  • Позитив: +313
  • Пол: Мужской
  • Последний визит:
    Ср, 26 Мар 2025 08:57:14

Спасибо огромное...

Отредактировано Геннадий Эдуардович (Пт, 10 Июн 2016 11:43:25)

0

4

  • Автор: qwertytop
  • Заслуженный
  • Зарегистрирован: Вт, 9 Авг 2016
  • Сообщений: 11
  • Уважение: +2
  • Позитив: +1
  • Последний визит:
    Вт, 7 Фев 2017 09:13:57

Alex_63
Здравствуйте, подскажите пожалуйста, как сделать такую-же кнопочку только с действием "вниз"?

0

5

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 11704
  • Уважение: +8002
  • Позитив: +5702
  • Пол: Мужской
  • Последний визит:
    Сегодня 21:32:37

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

0

6

  • Автор: qwertytop
  • Заслуженный
  • Зарегистрирован: Вт, 9 Авг 2016
  • Сообщений: 11
  • Уважение: +2
  • Позитив: +1
  • Последний визит:
    Вт, 7 Фев 2017 09:13:57

Alex_63
спасибо , посмотрел этот скрипт тоже, но просото хотелось бы именно такую кнопку только чтоб было действие вниз , не получается сделать ( по примеру

0

7

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 11704
  • Уважение: +8002
  • Позитив: +5702
  • Пол: Мужской
  • Последний визит:
    Сегодня 21:32:37

qwertytop
Вам нун две кнопки или ток кнопку Вниз ?

0

8

  • Автор: qwertytop
  • Заслуженный
  • Зарегистрирован: Вт, 9 Авг 2016
  • Сообщений: 11
  • Уважение: +2
  • Позитив: +1
  • Последний визит:
    Вт, 7 Фев 2017 09:13:57

Alex_63
кнопку вниз )

0

9

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 11704
  • Уважение: +8002
  • Позитив: +5702
  • Пол: Мужской
  • Последний визит:
    Сегодня 21:32:37

qwertytop
:glasses:

Код:
<!--Кнопка прокрутки вниз -->
<a href="#" class="scrolldown" title="Вниз">Вниз</a>
<script type="text/javascript">
$(document).ready(function(){var L=$("body");$(window).scroll(function(){
if(L.scrollTop()<$(this).height()-100){$('.scrolldown').fadeIn();}else{$('.scrolldown').fadeOut();}
});$('.scrolldown').click(function(){L.animate({scrollTop:L.height()},600);return false;});});
</script><style>
.scrolldown{
  width:31px;height:30px;
  position:fixed;bottom:30px;
  right:35px;display:none;
  text-indent:-9999px;
  background:rgba(0,0,0,0.35) url(http://forumstatic.ru/files/0014/ef/99/34838.png) 7px 10px no-repeat;
  background-size:17px;
  transition:background-color 1s linear,transform 0s linear,opacity 0s linear!important;
  border-radius:50%;-moz-border-radius:50%;z-index: 99999;
  transform:rotate(180deg)
}
.scrolldown: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>

Поправил

0

10

  • Автор: qwertytop
  • Заслуженный
  • Зарегистрирован: Вт, 9 Авг 2016
  • Сообщений: 11
  • Уважение: +2
  • Позитив: +1
  • Последний визит:
    Вт, 7 Фев 2017 09:13:57

Alex_63
Спасибо огромное!
Можете, подсказать какая часть кода отвечает за прокрутку вниз? , не до конца страницы прокручивает  вниз

0

11

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 11704
  • Уважение: +8002
  • Позитив: +5702
  • Пол: Мужской
  • Последний визит:
    Сегодня 21:32:37

qwertytop
Вроде поправил, переставьте

0

12

  • Автор: qwertytop
  • Заслуженный
  • Зарегистрирован: Вт, 9 Авг 2016
  • Сообщений: 11
  • Уважение: +2
  • Позитив: +1
  • Последний визит:
    Вт, 7 Фев 2017 09:13:57

Alex_63
перестала крутить совсем )

0

13

  • Автор: Alex_63
  • Администратор
  • Alex_63
  • Зарегистрирован: Чт, 11 Дек 2014
  • Сообщений: 11704
  • Уважение: +8002
  • Позитив: +5702
  • Пол: Мужской
  • Последний визит:
    Сегодня 21:32:37

qwertytop
o.O У мну вроде работает... мож поправлю к вечеру

0

Страница: 1

Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Кнопка вверх как на этом сайте...