|
11.02.15 17:13 |
|
Все наверно замечали на некоторых сайтах есть удобная кнопочка внизу, которая возвращает посетителя к началу страницы, это статья позволит реализовать на Вашем сайте подобную функцию хак dle кнопку вверх перехода.
Установка:
1. В файле main.tpl, перед тегом
</head>
вставляем следующий код:
|<script type="text/javascript">
(function(jq) {
jq.autoScroll = function(ops) {
ops = ops || {};
ops.styleClass = ops.styleClass || 'scroll-to-top-button';
var t = jq('<div></div>'),
d = jq(ops.target || document);
jq(ops.container || 'body').append(t);
t.css({
opacity: 0,
position: 'absolute',
top: 0,
right: 0
}).click(function() {
jq('html,body').animate({
scrollTop: 0
}, ops.scrollDuration || 1000);
});
$(window).scroll(function(){
var sv = d.scrollTop();
if (sv < 10) {
t.clearQueue().fadeOut(ops.hideDuration || 200);
return;
}
t.css('display', '').clearQueue().animate({
top: sv,
opacity: 0.8
}, ops.showDuration || 500);
});
};
})(jQuery);
$(document).ready(function(){
$.autoScroll({
scrollDuration: 2000,
showDuration: 600,
hideDuration: 300
});
});
</script>
|
2. В файле стилей дописываем следующий css код:
/*Кнопка наверх*/
.scroll-to-top-button{ background: #666 url("../images/ups.png") center center no-repeat;
width: 32px;
height: 32px;
color: #fff; font-family: verdana;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
cursor: pointer;
padding: 15px;
margin: 20px;
} |
3. Скачиваем картинку ТУТ и заливаем на сервер в templates/имя шаблона/images
Источник: http://reklama-1977.ru/hacks/574-knopka-naverh-s-ispolzovaniem-jquery.html
{jcomments on}
|
|
Последнее обновление 14.12.15 11:12 |
