Кнопка наверх скрипт для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 04.12.2016
Скрипты для uCoz » Кнопки для сайта uCoz » Кнопка наверх скрипт для сайта

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Кнопка наверх скрипт для сайта

Кнопка поднимающая страницу вверх




При прокрутке страницы вниз будет появляться кнопка для подёма на верх, в качестве кнопки может быть использован любой элемент, для этого предоставлены 2 варианта использования скрипта.
Вариант №1 Для установки потребуется поместить ссылку якорь в верхнюю часть сайта, а основную часть скрипта в нижнюю (для отображения на всех страницах сайта).
Вариант №2 Если есть желание видеть подобный эффект только на определённых страницах, или в разных модулях разные кнопки, тогда нужно разместить ссылку якорь после открывающего тега <body>, а основную часть перед закрывающим тегом </body> страниц модулей.
Внимание!!! Если будете использовавть второй вариант, тогда установку первого варианта нужно исключить.
Картинки стрелок вверх можно подобрать в этом материале:

  • Картинки со стрелками вверх
  • Для использования стрелок символами HTML посмотрите материалы о символах здесь:

  • Символы HTML
  • При наличии вопросов или предложений используйте форму комментариев материала.





    Код для применения текстовых и символьных кнопок

    Якорь для помещения в верхнюю часть сайта или после тега <body>


    <a id="top"></a>


    Скрипт для помещения в нижнюю часть сайта или перед тегом </body>


    <style>
    #scroll_to{
    display: block;
    display: none;
    z-index: 999;
    opacity: .8;
    position: fixed;
    top: 100%;
    margin-top: -80px;
    left: 90%;
    margin-left: -80px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    width: 100px;
    padding: 8px;
    /* - Цвет фона - */
    background-color: #f1f1f1;
    /* - Размер шрифта - */
    font-size: 14px;
    text-align: center;
    /* - Бордюр - */
    border: 1px solid #CCC;
    }
    #scroll_to a{
    /* - Цвет текста - */
    color: #222;
    text-decoration:none;
    }
    </style>
    <script src="http://delaisait.ucoz.ru/script/js/1/1/link_top.js"></script>
    <div id="scroll_to">
    <a href="#top" id="top-link">^ Наверх ^</a>
    </div>



    Код для применения картинок в качестве кнопок

    Якорь для помещения в верхнюю часть сайта или после тега <body>


    <a id="top"></a>


    Скрипт для помещения в нижнюю часть сайта или перед тегом </body>


    <style>
    #scroll_to{
    display: block;
    display: none;
    z-index: 999;
    position: fixed;
    bottom: 50px;
    right: 50px;
    }
    #scroll_to a{
    text-decoration:none;
    }
    </style>
    <script src="http://delaisait.ucoz.ru/script/js/1/1/link_top.js"></script>
    <div id="scroll_to">
    <a href="#top" id="top-link">
    <img src="Картинка" alt="Поднять страницу в верх" />
    </a>
    </div>



    Материал выложен пользователем startsmart, отредактировал и расширил IZOTOP.







    Русские шрифты



    Ссылка:
    BB code:




  • ©
  • | Просмотров: 4363 | Добавил: startsmart | Рейтинг: 4.7/3
    | Теги: скрипт кнопки вверх, поднять страницу

    Всего комментариев: 8
    0   Спам
    6 Cерег@   (12.05.2014 13:48)
    Аватар Cерег@ Подскажите , что надо добавить, чтобы при наведении менялась прозрачность кнопки Спасибо!

    0   Спам
    7 IZOTOP   (13.05.2014 18:44)
    Аватар IZOTOP Нужно добавить свойство прозрачности:

    opacity

    При наведении используется псевдокласс:

    :hover

    В итоге получается нужно добавить в стили вот это:

    Код

    #scroll_to a:hover {
    opacity:ТУТ ЧИСЛО;
    filter:alpha(opacity=ТУТ ЧИСЛО);
    }

    0   Спам
    8 Cерег@   (18.05.2014 19:58)
    Аватар Cерег@ Спасибо

    0   Спам
    5 boss   (11.01.2014 06:57)
    Аватар boss у меня картинка не появляется куда его кидать надо и как назвать ?
    cry

    0   Спам
    1 бав   (27.12.2013 19:57)
    Аватар бав Привет, помогите, код вставляю картинка появляется при прокрутки сайта, но эффекта подъёма нету почему-то

    0   Спам
    2 IZOTOP   (27.12.2013 20:10)
    Аватар IZOTOP Вы забыли указать адрес страницы где используется эффект подъёма страницы.

    0   Спам
    3 бав   (27.12.2013 20:18)
    Аватар бав Спасибо большое, а не подскажите где именно там надо указывать?

    0   Спам
    4 IZOTOP   (27.12.2013 20:58)
    Аватар IZOTOP Адрес страницы где Вы установили кнопку подъёма страницы вверх.
    Напишите мне адрес я сам гляну в чём причина не работоспособности.


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]