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

Объявление

🔴 Разговорный стрим "Время уDEVительных историй"

Дата и время: начало 2 марта в 17:00 по МСК;
Разберём несколько распространённых мифов о дизайне и программировании.
Готовы узнать правду о том что скрывается за кулисами этой индустрии? 🔥

Подробности

☕ 7 вечеров с magia

Дата: с 27 февраля по 5 марта;
Хотите узнать, что таит в себе magia?
Присоединяйтесь к обсуждению и подготовьте вопросы!

Задать вопрос

ДОРАБОТАЕМ ВМЕСТЕ СКРИПТ ПЕРВОАПРЕЛЬСКИХ РОЗЫГРЫШЕЙ

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

Принять участие

GEMcross

Кроссовер, ориентированный на активную игру и уютный флуд.
Собираем у себя драгоценных игроков уже два года.

Посетить

TVD: FACELESS

В каждой истории есть две стороны.
Я и герой, и злодей.

Посетить

ЭНТЕРОС

Магия и технологии, эпизоды, 18+
ПутеводительХотим видетьРасы

Посетить

🌟 ОПЛАТА ЗАКАЗА НАГРАДНЫМИ БАЛЛАМИ И СКИДКИ

Заказы можно оплачивать наградными баллами (НБ). Полностью или частично.
Бартер за НБ осуществляется на условиях платного заказа, в качестве оплаты - НБ.
А если у вас есть любой платный заказ, вы можете обменять НБ на скидочные купоны.

узнать подробности

💰 Продаётся: функционал, упрощающий жизнь админу форума

Ивент-календарь, вкладки и слайдеры в постах облегчат оформление и информирование игроков о событиях на форуме.
Скрипт подсчёта постов за вас посчитает активистов и тех кто не пишет посты в указанных разделах и за указанный период времени.
Чат на отдельной странице на форуме, без регистрации, используются форумные аккаунты.
Ультимативный список тем - картинки, описания и иконки для топиков.

Как купить

📣 Наш проект: Ролевой поисковик

Поиск роли на текстовых ролевых
Проект от специалистов FD

Спойлеры и обсуждение

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

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

Подробнее

SPECIAL OFFER: We distribute designs for free

Finalizing the layout for your project;
Developing a style code;
Mobile version included if you wish.

Details

Support the project

If you want to help us:
Become a moderator
SuggestionsReviews

Details
❗ ❗ ❗ Technical work is underway. We'll fix it soon. :) If you're english-speaker and want to use our forum, switch to the russian language. This is temporary, until the works with multi-language option will be done. Sorry for the inconvenience.

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

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



Кнопка "Вверх" с анимационной прокруткой (JS, CSS)

Сообщений 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
А в чем проблема? оО Насколько я вижу, кнопка отображается и работает

0

4

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

0

5

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

0