1

Тема: Кнопка "Наверх"

Кто-нибудь уже использовал кнопку "наверх" в monstra cms? В интернете миллион скриптов, какой лучше? Принцип внедрения?

Поделиться

2

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

Проще поставить якорную ссылку

Поделиться

3 (2012-12-07 09:10:12 отредактировано olsv64)

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

jQuery обязательно

<a href="#" id="gotoTop" title="Go to Top">Go to Top</a>
<script>
// кнопка наверх//
        $(window).scroll(function() {
            if($(this).scrollTop() > 300) {
                $('#gotoTop').css('display','block');
                $('#gotoTop').stop().animate({opacity: 1});
            } else {
                $('#gotoTop').stop().animate({opacity: 0}, function(){
                    $(this).css('display','none');
                });
            }
        });
        $('#gotoTop').click(function() {
            $('body,html').animate({scrollTop:0},400);
            return false;
        });
</script>

Сайт olsv64

Поделиться

4

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

olsv64 пишет:
<a href="#" id="gotoTop" title="Go to Top">Go to Top</a>

Где прописывается? В любом месте шаблона?

Поделиться

5

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

самый простой и старый способ я так делал с моим самым первым сайтом, чисто случайно smile
<a href="#">ВВЕРХ</a>
все, не каких скриптов smile)) не че не надо хахаха но это не висящая сбоку кнопка которая гоняет за тобой, а просто текст в футере допустим

(c) RomanArt
Создание дизайнов любой сложности для Monstra cms

Поделиться

6

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

может человек хочет, чтобы его страничка красиво ездила, а не просто прыгала

Сайт olsv64

Поделиться

7

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

newbie пишет:
olsv64 пишет:
<a href="#" id="gotoTop" title="Go to Top">Go to Top</a>

Где прописывается? В любом месте шаблона?

лучше снизу конечно и в css все свойства для нее пропишите, например такие, только картинку со стрелочкой сами сделайте

#gotoTop {
    display: none;
    position: fixed;
    z-index: 150;
    top: 50%;
    margin-top: -24px;
    left: auto;
    right: 0;
    text-indent: -9999px;
    width: 48px;
    height: 48px;
    background: #D20C0C url("../images/go-to-top.png") center no-repeat;
    transition: background-color .3s linear;
    -moz-transition: background-color .3s linear;
    -webkit-transition: background-color .3s linear;    
    -ms-transition: background-color .3s linear;
    -o-transition: background-color .3s linear;
}
#gotoTop:hover { background-color: #444; }

Сайт olsv64

Поделиться