Страница 1 из 2

[dev] Scroll Up Down - кнопки верх вниз

Добавлено: 15.10.2015 11:56
владимир1983
Стрелки отображаются(появляются) в правом нижнем углу.
scrollupdown1.jpg
scrollupdown2.jpg
scrollupdown3.jpg

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 15.10.2015 12:14
владимир1983
Без установки расширения
/styles/my-styles/template/overall_footer.html
Найти добавить перед

Код: Выделить всё

<div class="go-up" id='ToTop'>⇧</div>
<div class="go-down" id='OnBottom'>⇩</div>

<script>
$(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>
/styles/my-styles/theme/colours.css
Добавить

Код: Выделить всё

.go-up, .go-down {
 display: none;
 position: fixed;
 z-index: 9999; 
 right: 0%; 
 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: 60px; }
.go-down { bottom: 10px; }
.go-down:hover,
.go-up:hover {
 opacity: 1;
 box-shadow: 0 5px 0.5em -1px #666;
}

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 16.10.2015 19:41
Triniti
Спасибо, попробую, потом скажу, что получилось.

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 18.10.2015 23:13
southklad
отличное расширение, спасибо!

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 20.10.2015 14:15
MAKOMI
А что и где надо править в расширении для отображения стрелок справа?

Отправлено спустя 1 минуту 54 секунды:
Все. Отбой нашел :D

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 20.10.2015 19:51
Triniti
Владимир, установила стрелки, работает отлично.
Есть несколько нюансов, если сочтете нужным продолжать это.
Можно было бы стрелки сделать поменьше, поизящнее. Потому что на малых устройствах они великоваты. Не отображать их на Главной, вообще, отображать только на страницах тем. Хотя может быть у кого-то и активные темы приличная по длине страница... :)

Лучше имхо делать в виде расширения, чтобы лишний раз не править код. Не потому что лень, а код есть код, его лучше лишний раз не трогать.

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 22.12.2015 18:34
Лала
Доброго времени суток. Скажите пожалуйста, а можно ли заменить данные стрелки на картинку?

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 22.12.2015 21:01
владимир1983
владимир1983 писал(а): <div class="go-up" id='ToTop'>⇧</div>
<div class="go-down" id='OnBottom'>⇩</div>
Попробуй так:

Код: Выделить всё

<div class="go-up" id='ToTop'><img src="URL to img" alt="Вверх"></div>
<div class="go-down" id='OnBottom'><img src="URL to img" alt="Вниз"></div>

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 23.12.2015 15:17
Лала
владимир1983, спасибо, получилось поменять

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 13.04.2016 11:55
hunter_ua
Всем привет!
владимир1983 писал(а): <div class="go-up" id='ToTop'>⇧</div>
<div class="go-down" id='OnBottom'>⇩</div>
Владимир возможно стоит использовать такой вариант:

Код: Выделить всё

<div class="go-up" id='ToTop'>&uArr;</div>
<div class="go-down" id='OnBottom'>&dArr;</div>

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 13.09.2016 18:57
southklad
А почему ссылка Домашняя страница: https://github.com/VSEphpbb/scrolltotop ведет как я понимаю на другое расширение?

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 13.09.2016 19:03
Sumanai
Как бы намекает, откуда вдохновлялся владимир1983 :mrgreen:

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 13.09.2016 19:05
владимир1983
Sumanai, в том эксте нет кнопки вниз. Работает вот так https://volnistye.ru/

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 13.09.2016 19:11
southklad
Просто, проверял обновления расширений, и установил его повторно, только в качестве другого по ссылке. Мне кажется оно излишне и путает.

Re: [dev] Scroll Up Down - кнопки верх вниз

Добавлено: 13.09.2016 19:15
владимир1983
igorbond, от того расширения каркас файловый использовался, ну вот ссылка и осталась. Пусть будет, мож тот вариант кому глянется. Мне вон только вверх кнопка нужна.