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

[владимир1983]

Стрелки отображаются(появляются) в правом нижнем углу.

scrollupdown1.jpg

scrollupdown2.jpg

scrollupdown3.jpg

[владимир1983]

Без установки расширения
/styles/my-styles/template/overall_footer.html
Найти

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

</body>

добавить перед

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

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

[Triniti]

Спасибо, попробую, потом скажу, что получилось.

[southklad]

отличное расширение, спасибо!

[MAKOMI]

А что и где надо править в расширении для отображения стрелок справа?

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

[Triniti]

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

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

[Лала]

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

[владимир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>

[Лала]

владимир1983, спасибо, получилось поменять

[hunter_ua]

Всем привет!

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

[southklad]

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

[Sumanai]

Как бы намекает, откуда вдохновлялся владимир1983

[владимир1983]

Sumanai, в том эксте нет кнопки вниз. Работает вот так https://volnistye.ru/

[southklad]

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

[владимир1983]

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