X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Кнопка «Вверх» для сайта на jQuery
Sa[Y]moN
Sa[Y]moN
Topic Starter сообщение 22.12.2013, 18:11; Ответить: Sa[Y]moN
Сообщение #1


Я думаю все мы видели кнопку "Вверх" в выдаче Яндекса. Мне она приглянулась, и как ленивая натура, я совсем не захотел писать сам скрипт, искать еще где-то, поэтому я решил его нагло стырить. К тому-же, если самый крутой поисковик Рунета использует этот скрипт, значит он реально не плох. Кто не поймет о чем я, я говорю о такой кнопке:
Прикрепленное изображение

После установки на свой сайт, я решил поделиться скриптом с пользователями любимого форума ruSEO, может кому она тоже приглянулась и копаться в исходниках не хочется.
Конечно, вариаций скриптов полно, но мне нравится именно этот. Ладно, хватит разговоров, приступим к установке:

1-й Шаг. Добавляем небольшой JavaScript в шаблон сайта, перед закрывающим тегом </head>
<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
$('body').append ('<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>');
});</script>


2-й Шаг. Добавляем CSS-стили блока и кнопки вверх в файл style.css (название файла style.css у вас может быть и другим, но это не важно, добавьте код в любой файл стилей, который подключается к сайту).
.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}

Как видите, даже url фоновой картинки со стрелкой не стал менять. Подгрузка с Яндекса - это быстро и удобно.

Для не очень понимающих, расскажу, что тут можно настроить:
*bottom:90px; – смещение блока с кнопкой относительно низа страницы;
*width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может. Данные значения я выявил *экспериментально, проверяя положение кнопки на разных разрешениях экрана именно для моего шаблона на блоге. Чего и вам рекомендую;
*padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
*color:white; — цвет надписи «вверх»;
*border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k0ttee
k0ttee
сообщение 30.6.2014, 4:15; Ответить: k0ttee
Сообщение #2


Ну да... Код хороший чистенький, ничего лишнего сбоку не прикручено...

А если юзеров научить "действительно пользоваться ПК", то Scroller не нужен. Ибо есть замечательная кнопка HOME где-то справа на клавиатуре пользователя. :P Но пользователь никогда не знает, что этой кнопкой очень удобно пользоваться. :rjunimagu:

А место на экране можно было бы занять и более полезными штуками-дрюками.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Задонь кибер-коту на крипто-вискас
btc: 3Hq7X9CosVftRFPqWis1Dkk5MdtM1u6jj9
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 342 Вчера, 15:13
автор: LiveExpert
Открытая тема (нет новых ответов) Партнерская программа для Эзотерики, Магии, Таро
партнерка для эзотерики
0 LiveExpert 317 Вчера, 15:13
автор: LiveExpert
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыAzinomoney.com - гемблинг-партнерка с 65%RS для каждого
Гарантированный заработок на гемблинг-трафике
65 AzinoMoney 29182 27.3.2024, 19:10
автор: AzinoMoney
Горячая тема (нет новых ответов) Продвижение молодого сайта
30 maxmer 6367 26.3.2024, 21:49
автор: c4p1t4l15t
Открытая тема (нет новых ответов) SEO-текст на главной странице сайта и в категориях
5 boltuk 1354 26.3.2024, 21:43
автор: c4p1t4l15t


 



RSS Текстовая версия Сейчас: 29.3.2024, 2:14
Дизайн