ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

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

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



Кнопка "Вверх" с анимационной прокруткой

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

1

Кнопка прокрутки вверх
появляющаяся при прокрутке страницы вниз

Автор: Alex_63
Платформа: любая

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


Другая версия скрипта
Изначально скрипт взят из дизайнерского блога TRUE-CODER.

С помощью этого скрипта на форуме размещается кнопка, подобная кнопке на сайте Вконтакте, при нажатии перемещающая в самый верх страницы. В скрипте опциональны: уровень появления кнопки, уровень, до которого нужна прокрутка, стиль кнопки и надпись под ней.

В любой из контейнеров размещается такой код:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Причем надпись можно менять на любую другую ("Go to top", "Up to navigation" и т.д.)

Далее идет стиль кнопки, размещается в одно из окон css

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

И, наконец, в html-низ размещаем сам скрипт плавной прокрутки:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Синим цветом выделено значение (в px), отвечающее за уровень появления кнопки (от верха).
Красным цветом выделено значение (в px), обозначающее уровень, на который нужно переместиться.

Отредактировано Герда (21.12.17 19:25)

+4

2

Скажите пожалуйста, что сделано не так?
Я хотела поставить этот скрипт, но видимо делаю, что-то не так.
HTML-низ ставлю этот код:
<p id="back-top">
<a href="#top"><span></span>Вверх</a>
</p>

<script>
$(document).ready(function(){

// hide #back-top first
$("#back-top").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});

// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>
CSS (первое окно) в самый низ
#back-top {
position: fixed;
bottom: 30px; /* отступ кнопки снизу */
margin-left: -150px; /* отступ кнопки слева (для указания отступа справа
используйте margin-right) */
}

#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top a:hover {
color: #000;
}

/* иконка стрелки (тег span) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(...) no-repeat center center;
/* в скобках указываем путь к иконке */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
/* скругленные углы  */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

#back-top a:hover span {
background-color: #777;
}

0

3

Lusiya
А в чем проблема? оО Насколько я вижу, кнопка отображается и работает

Подпись автора

Моя власть распространяется на: все темы заказов, вопросы и уроки по css и Photoshop, вопросы от новичков.
Также я отвечаю за: подсчет и статистику заказов, чистку тем, ответы на организационные вопросы пользователей, прием новых кадров.
Я работаю: со всеми видами статики и анимации, кроме ручной отрисовки.
Мне нельзя писать в ЛС: если у вас вопрос, который без проблем решается в одной из тем; просьба взять заказ вне очереди; вопросы из серии где/куда/зачем - на форуме есть навигация в каждом разделе.
Мне можно писать в ЛС: если хочется просто поболтать, вопросы по использованному в той или иной работе шрифту, текстуре, колорке либо просьба чуть-чуть подправить заказ, если не успели это сделать до переноса в тему выполненных.

ЗАКАЗЫ В ЛС НЕ ДЕЛАЮ!

0

4

Да, я там не много напутала и картинку не вставила. А у этой прокруке есть Вниз?

0

5

Очень приятная анимация. В самом деле, подскажите, как сделать, чтобы была ещё и кнопка вниз?  http://uploads.ru/i/K/Z/U/KZUwI.gif Желательно, чтобы появлялась справа, сверху.

0