Next Generation CMS :: Форум поддержки

Заинтересовала наша система? Тогда этот форум для Вас!

Вы не зашли.

#1 2011-12-05 20:55:48

Taxist
Участник
Зарегистрирован: 2011-12-04
Сообщений: 11
Рейтинг :   
Сайт

Красивая кнопка "Наверх"

Делаем кнопку На верх
Можете посмотреть как у меня!!! 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)

Не в сети

#2 2011-12-06 04:27:21

easmik
VIP забанил этого пользователя.
Зарегистрирован: 2011-02-01
Сообщений: 1,031
Рейтинг :   37 

Re: Красивая кнопка "Наверх"

Taxist, тему надо было в faq разместить

Не в сети

#3 2011-12-06 08:00:32

Wolverine
Модератор
Откуда Домодедово
Зарегистрирован: 2008-10-13
Сообщений: 3,538
Рейтинг :   160 
Сайт

Re: Красивая кнопка "Наверх"

Зачем в FAQ'е эти JS фишки, FAQ по CMS.

Не в сети

#4 2011-12-06 08:25:38

Taxist
Участник
Зарегистрирован: 2011-12-04
Сообщений: 11
Рейтинг :   
Сайт

Re: Красивая кнопка "Наверх"

Ребят я новенький, если нужно я перенесу тему!!!!

Не в сети

Подвал раздела

Работает на FluxBB