Стрелка "Вверх"

soft67

soft67

Пользователь
Небольшой хак для вашего сайта, стрелка "вверх" или "поднять страничку". Это уж как будет угодно вам.
Итак:
1) Создаем файл gotop.js и кидаем его в корень сайта

Код: 
$(function(){var scroll_start=30;var top=0;$('body').append('<a href="#" id="gotop" title="Наверх &uarr;"></a>');var s=$('#gotop');var margin_top=parseInt(s.css('top'));function gotop_scroll(){top=$(window).scrollTop();if(top<scroll_start)s.fadeOut(400);else s.css('opacity',0.5).fadeIn(300)}$(window).scroll(gotop_scroll);s.live({mouseenter:function(){if(top>scroll_start)$(this).fadeTo(200,1.0)},mouseleave:function(){if(top>scroll_start)$(this).fadeTo(400,0.5)},click:function(){$('html,body').animate({scrollTop:0},'slow');return false}})})

где var scroll_start=30 это количество пикселей когда должна появиться стрелка. Можете изменить по своему усмотрению.

2)В самый низ main.css ставим:
Код: 
/* ================================================================ *
    gotop
* ================================================================ */
#gotop{position:fixed;width:41px;height:41px;right:7px;bottom:20px;display:block;background:url('http://ВАШ_ДОМЕН/templates/default/images/gotop.png') no-repeat;z-index:9998;display:none;}

Расположение кнопки так же можете установить по своему усмотрению СПРАВА или СЛЕВА. Не забудьте предварительно отредактировать, прописав свой домен в пути до картинки.

3) В page_header.tpl перед </head> ставим:
Код: 
<script type="text/javascript" src="{#BB_ROOT}gotop.js"></script>

Картинку со стрелкой закидываем в images шаблона. Картинку так же можете изменить на свой вкус и в соотношении с дизайном сайта.
 

Вложения

  • gotop.png
    gotop.png
    4.5 KB · Просмотры: 97
C

co:caine

Гость
И в css не
Код: 
/* ================================================================ *
    gotop
* ================================================================ */
#gotop{position:fixed;width:41px;height:41px;right:7px;bottom:20px;display:block;background:url('http://ВАШ_ДОМЕН/templates/default/images/gotop.png') no-repeat;z-index:9998;display:none;}

а

Код: 
/* ================================================================ *
    gotop
* ================================================================ */
#gotop{
position:fixed;
width:41px;
height:41px;
right:7px;
bottom:20px;
display:block;
background:url('../images/gotop.png') no-repeat;
z-index:9998;
display:none;
}

P.S. Файл gotop.png закинуть в \templates\default\images
 
Сверху