Страница вверх ToTop

functions.php

Добавляем в footer.php


<script type="text/javascript">
    jQuery(function(){
        jQuery(document).ready(function()
        {
            jQuery(".go-to-top").hide(),
            jQuery(window).scroll(function()
            {
                var e=jQuery(window).scrollTop();
                e>900?jQuery(".go-to-top").fadeIn():jQuery(".go-to-top").fadeOut()
            }),
            jQuery(".go-to-top").click(function()
            {
                return jQuery("html,header,body").animate({scrollTop:0},700),!1
            })
        })
    });
</script>

<div class="go-to-top" style="display: none;">
    <a class="" title="Наверх" href="#masthead"></a>
</div>

Добавляем в style.css

.go-to-top {
    position: fixed;
    bottom: 20px;
    right: 12px;
    z-index: 999;
}
.go-to-top a {
    width: 45px;
    height: 45px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    display: block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 24px;
    line-height: 44px;
    font-family: 'FontAwesome';
    background-color: #848484;
    text-align: center;
    color: #fff;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter:alpha(opacity=50);
    -ms-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.go-to-top a:hover {
    opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
    background-color: #6897e5;
}
.go-to-top a:before {
    content: '\f102';
}

Об авторе

Ремонт компьютеров, создание web сайтов
Напишите свой комментарий

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

9 − один =