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

Taxist · 2011-12-05 19:55:48

Делаем кнопку На верх
Можете посмотреть как у меня!!! www.Sotube.ru

Исходный код:

<p id="back-top">
<a href="#top" title="Перейти наверх страницы"><span></span><em>Наверх</em></a>
</p>

Копируем его в main.tpl своего шаблона, перед </body>.Лично я скопировал перед , но у всех шаблоны разные.

Далее открываете 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 11:13:38)

easmik · 2011-12-06 03:27:21

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

Wolverine · 2011-12-06 07:00:32

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

Taxist · 2011-12-06 07:25:38

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

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

Объявление

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

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

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

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

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

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

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

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

Подвал форума