Next Generation CMS :: Форум поддержки
Вы не зашли.
- Темы: Активные | Без ответов
Объявление
Страницы 1
#1 2011-12-05 20:55:48
Красивая кнопка "Наверх"
Делаем кнопку На верх
Можете посмотреть как у меня!!! www.Sotube.ru
Исходный код:
<p id="back-top">
<a href="#top" title="Перейти наверх страницы"><span></span><em>Наверх</em></a>
</p>Копируем его в main.tpl своего шаблона, перед </body>.Лично я скопировал перед <!-- end footer -->, но у всех шаблоны разные.
Далее открываете CSS стиль шаблона и вставляете в конце:
/*
Back to top button
*/
#back-top {
margin:0;
padding:0;
position: fixed;
bottom: 30px;
margin-left: -150px;
clear: both;
display:block;
}
#back-top a {
padding: 0;
margin: 0;
height: 40px;
width: 100px;
display: block;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: background-color .7s;
-moz-transition: background-color .7s;
-o-transition: background-color .7s;
transition: background-color .7s;
}
#back-top a:focus {
outline:none;
}
#back-top a:hover {
color: #000;
}
#back-top a em {
letter-spacing: 1px;
line-height:40px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
padding-right: 5px;
font-style: normal;
}
/* arrow icon (span tag) */
#back-top span {
float:right;
width: 40px;
height: 40px;
display: block;
margin-bottom: 7px;
background: #eee url(../images/ups.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #ddd;
}Не забываем скачать картинку стрелки ups.png и закинуть ее в папку шаблона /images
jQuery
И чтобы завершить создание эффекта плавной прокрутки к началу страницы, мы используем приведённый ниже код Javascript. Вы можете его вставить на свою страницу. Не забудьте только подключить саму библиотеку jQuery.
В начале данный скрипт прячет нашу кнопку (в моем случае это
<p id="back-top">), ведь мы находимся в начальной области страницы, и нам она не нужна.
Затем он проверяет, находится ли окно прокрутки в верхней позиции (scrollTop) и его значение больше 100. Если да, то элемент # back-top начинает плавно появляться, иначе плавно исчезает. Дальше следует функция, которая срабатывает при нажатии мышкой. Если нажатие произошло, то скрипт начнет перемещать страницу до тех пор, пока значение scrollTop не будет равно 0.
Исходный код:
Вставляем в main.tpl перед </head>
<script type="text/javascript">
$(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>Как подключить jQuery :Вставляем код между тегами <head> </head> в main.tpl
<script type="text/javascript" src="{tpl_url}/js/jquery-1.6.1.min.js"></script>Изменено ROZARD (2011-12-06 12:13:38)
Не в сети
Страницы 1