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

Объявление

Контакты:

Instagram: a.schmidt1895
WhatsApp: +7(938)116-19-35

Подробнее

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

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

Подробнее

Мийрон

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

Подробнее

Дизайн «Warlords of Draenor»

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

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

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

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

Подробнее
Открыта регистрация участников лотереи "Ролевые заявки" за июль. Не пропустите! Cрок регистрации до 10.08!

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

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



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

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

1

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

+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