prowebber.ru - Тут есть все для настоящих вебмастеров

Мы в твиттере Наша страничка на FaceBook! Сообщество вебмастеров в VK Мы в телеграме!

PW — всё для вебмастера » Web » Скрипты » Кнопка "Наверх" для DLE 10.x

Кнопка "Наверх" для DLE 10.x

Данный материал предоставлен сайтом ProWebber.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Кнопка "Наверх" для DLE 10.x.

Кнопка "Наверх" для DLE 10.x

Приветствую всех.
По просьбе трудящихся адаптировал кнопку "Наверх" для актуальных версий DLE и сделал маленький модный редизайн ;)

Установка предельно проста, но требует знаний - что такое файл стилей, что такое js файл и где они находятся.
Для начала необходимо залить эту картинку в папку images в вашем шаблоне.


Кнопка "Наверх" для DLE 10.x



В файле стилей прописываем стиль самой кнопки:
.gototop{
    display: none;
    cursor: pointer;
    position: fixed;
    left: 0;
    top: 0;
    width: 3%;
    max-width: 60px;
    min-width: 10px;
    height: 100%;
    background: url('../images/uarr.png') no-repeat 50% 12px;
    transition: background-color .2s ease-in;
    z-index: 99;
}
.gototop:hover{
    background-color: rgba(240,240,240,.5)!important
}


И в JS файле прописываем сам обработчик:
var gotop_scroll_start = 200;
function gotop_scroll(){
    if($(window).scrollTop()<gotop_scroll_start) $('.gototop').fadeOut(400);
    else $('.gototop').fadeIn(300);
}
$(function(){
    $('body').append('<div class="gototop" title="Наверх &uarr;"></div>');
    if($(window).scrollTop()>gotop_scroll_start) $('.gototop').show();
    $(window).scroll(gotop_scroll);
    $(".gototop").click(function(){$('html,body').animate({scrollTop:0})});
})


Пример можно посмотреть на демо странице.


С уважением,
Олег Александрович a.k.a. Sander





+3

Просмотры: 2905 :: Комментарии (7) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1DomiTori

  • 18 июля 2015 22:21
  • Регистрация: 8.12.2012
  • ICQ: 643771141
  • Комментариев: 17
спасибо, все работает как часы, не забываем изображение стрелки прикреплённое к новости залить в шаблон/images

0

#2Кот(Боюн)

  • 19 июля 2015 02:28
  • Регистрация: 12.07.2014
  • ICQ: --
  • Комментариев: 9
  • Выкл.
Как сделать что-бы при скроле вниз полоска немного подсвечивалась?

0

#3Artyom91

  • 19 июля 2015 07:04
  • Регистрация: 8.01.2013
  • ICQ: 5605715
  • Комментариев: 58
Олег, это же просто html + JS, причем тут DLE? ))

0

#4Sander

  • 19 июля 2015 12:19
  • Регистрация: 19.02.2010
  • ICQ: 404037556
  • Комментариев: 326
Artyom91,
Чтобы не спрашивали - "На DLE 10.5 пойдет?".

--------------------

+1

#5hatab

  • 20 июля 2015 15:17
  • Регистрация: 14.10.2010
  • ICQ: --
  • Комментариев: 50
biggrin biggrin biggrin biggrin biggrin biggrin biggrin
это везде подойдёт..., где можно применить html, css и js

УЖЕ НЕ НОВО!

--------------------

0

#6ПафНутиЙ

  • 21 июля 2015 18:56
  • Регистрация: 8.03.2010
  • ICQ: 817233
  • Комментариев: 400
Цитата: Sander
Чтобы не спрашивали - "На DLE 10.5 пойдет?".

smile думаю если бы не было написано о версии dle - 100% первый комментарий был именно с вопросов "а на DLE XX.X пойдёт?".
Не все понимают разницу мешду модулем и шаблоном и уж тем более между java и javascript

--------------------

+1

#7artemmian

  • 26 июля 2015 19:58
  • Регистрация: 2.01.2012
  • ICQ: --
  • Комментариев: 30
Слегка переделанный вариант:

http://artemmian.ru/523-js-knopka-vverh-dlya-sayta-po-vsey-vysote-ekrana.html

--------------------

0
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

mp3live.co - Рингтоны 2018 скачать

Telegram: @haylock_chat - Узнай как открыть свой бизнес бесплатно и как можно заработать.

https://culabra.ru — Блог вЭбмастЭра

DCOReARTs.COM - Услуги веб-дизайна и графики

Max-energy.top - Заработок на электросчетчиках;)

Наши баннеры
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Каких материалов НЕ хватает на сайте?

Шаблонов
Скриптов
Программ
Графики
Уроков и курсов

Архив новостей
Август 2018 (345)
Июль 2018 (414)
Июнь 2018 (377)
Май 2018 (496)
Апрель 2018 (345)
Март 2018 (391)

Последние комментарии:

  • Скрипты, cms, шаблоны, статьи по раскрутке
  • Яндекс.Метрика

Искать людей

Ваши переписки