Кнопка наверх для DLE Печать
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