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

Чтение RSS Мы в твиттере
«    Декабрь 2016    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

Всё для вебмастера » Web » Скрипты » Кнопка "Наверх"

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


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


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

Сделал очередной велосипед - кнопка для прокрутки страницы сайта наверх.

Установка довольно таки проста, но надо как минимум уметь создавать/редактировать файлы и подключать JS файлы к шаблону.
CSS:
#gotop{position:fixed;width:41px;height:41px;right:7px;bottom:20px;display:block;background:url('../images/gotop.png') no-repeat;z-index:9998;display:none;}

JS:
$(function(){var scroll_start=30;var top=0;$('body').append('<a href="#" id="gotop" title="Наверх"></a>');var s=$('#gotop');var margin_top=parseInt(s.css('top'));function gotop_scroll(){top=$(window).scrollTop();if(top<scroll_start)s.fadeOut(400);else s.css('opacity',0.5).fadeIn(300)}$(window).scroll(gotop_scroll);s.live({mouseenter:function(){if(top>scroll_start)$(this).fadeTo(200,1.0)},mouseleave:function(){if(top>scroll_start)$(this).fadeTo(400,0.5)},click:function(){$('html,body').animate({scrollTop:0},'slow');return false}})})

Обратите внимание на scroll_start=30; Это количество пикселей, начиная с которого появляется стрелка.

Так же в папку {THEME}/images/ вам нужно загрузить это Кнопка "Наверх" или любое другое изображение стрелки и переименовать его в gotop.png

Пример работы вы можете видеть на моем сайте и тут на prowebber.

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


+60
Просмотры: 8729 VIP ProWebber | Комментарии (36)
Теги: Наверх, Sander
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1jostic

  • 15 июля 2012 15:17
  • Регистрация: 1.12.2011
  • ICQ: --
  • Комментариев: 16
Как её подключитЬ ? Подключил js к шаблону, поставил CSS

0

#2hell

  • 15 июля 2012 15:27
  • Регистрация: 12.09.2010
  • ICQ: --
  • Комментариев: 90
  • Выкл.
В исходном коде лень глянуть чтоль ))
***cript type="text/javascript" src="/templates/prowebber/js/gotop.js"></scri****

0

#3jostic

  • 15 июля 2012 15:30
  • Регистрация: 1.12.2011
  • ICQ: --
  • Комментариев: 16
Ты написал как JS подключитЬ. я подключил, но не показывет кнопку

+1

#4Sander

  • 15 июля 2012 15:33
  • Регистрация: 19.02.2010
  • ICQ: 404037556
  • Комментариев: 324
Так же надо и CSS прописать в подключаемом к шаблону файле.
После чего перезагрузить очистить кеш браузера. В нем сохранен старый файл стилей.
Инструкция 100% рабочая, я себе по ней ставил кнопку.

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

+1

#5jostic

  • 15 июля 2012 15:34
  • Регистрация: 1.12.2011
  • ICQ: --
  • Комментариев: 16
Может вопрос смешной, но как подключить CSS и в каком именно месте шаблона ?

+1

#6Sander

  • 15 июля 2012 15:42
  • Регистрация: 19.02.2010
  • ICQ: 404037556
  • Комментариев: 324
Поразительно, неужели проще просидеть пол дня в ожидании ответа, чем вбить этот же вопрос в поисковике гугла?

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

+1

#7bucefal82

  • 15 июля 2012 15:52
  • Регистрация: 11.01.2011
  • ICQ: 351593056
  • Комментариев: 156
  • Выкл.
Допиши в свой Style.css( Main.css)

#gotop{position:fixed;width:41px;height:41px;right:7px;bottom
8;20px;display:block;background:url('../images/gotop.png'
1; no-repeat;z-index:9998;display:none;}


И всё

0

#8SaD

  • 15 июля 2012 15:55
  • Регистрация: 23.02.2011
  • ICQ: --
  • Комментариев: 502
scroll_start=30;

Как-то не тру :)

И это...может лучше проценты

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

0

#9AltRock

  • 15 июля 2012 16:10
  • Регистрация: 28.02.2011
  • ICQ: 373025020
  • Комментариев: 119
все работает спс:)

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

0

#10bitfam

  • 15 июля 2012 16:39
  • Регистрация: 10.03.2012
  • ICQ: 499437677
  • Комментариев: 116
так файл gotop.js самому делать или переименовать надо файл knopka.js ?

не получается у меня что то, что я не так делаю

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

0

#11AltRock

  • 15 июля 2012 16:39
  • Регистрация: 28.02.2011
  • ICQ: 373025020
  • Комментариев: 119
bitfam, создать текстовый документ и прописать ко, а название любое!

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

0

#12bitfam

  • 15 июля 2012 17:13
  • Регистрация: 10.03.2012
  • ICQ: 499437677
  • Комментариев: 116
AltRock все сделал , но у меня если смотреть код страницы этот скрипт " <script type="text/javascript" src="/templates/musiclife/js/gotop.js"></script> "
не открывается может с правами что то не так , не работает у меня почему то , и css в любое место можно? я в конец дописал

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

0

#13AltRock

  • 15 июля 2012 17:28
  • Регистрация: 28.02.2011
  • ICQ: 373025020
  • Комментариев: 119
bitfam,
вот так пропиши <script type="text/javascript" src="{THEME}/js/gotop.js"></script>

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

0

#14daiv777

  • 15 июля 2012 17:33
  • Регистрация: 6.04.2011
  • ICQ: --
  • Комментариев: 270
bitfam,
да засунь содержимое в любой свой подключенный скрипт.

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

0

#15bitfam

  • 15 июля 2012 17:48
  • Регистрация: 10.03.2012
  • ICQ: 499437677
  • Комментариев: 116
daiv777,сделал как вы сказали получилось , а другие способы че не получились

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

0

#16Dinamit87

  • 15 июля 2012 18:41
  • Регистрация: 2.06.2012
  • ICQ: 603846313
  • Комментариев: 2
установил
все работает,спасибо )

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

0

#17CamStyle

  • 15 июля 2012 18:57
  • Регистрация: 6.05.2010
  • ICQ: 6670833
  • Комментариев: 396
Вот подключение скрипта можно сделать проще, кто не разобрался в данной теме: [ http://xsonz.ru/master/scripts/22-knopka-vverh.html ]

-3

#18249893

  • 15 июля 2012 20:24
  • Регистрация: 14.09.2011
  • ICQ: 249893
  • Комментариев: 14
  • Выкл.
в чем прикол в этой кнопке? в нете такие есть

0

#19Cresis

  • 16 июля 2012 01:10
  • Регистрация: 18.07.2011
  • ICQ: --
  • Комментариев: 269
Все получилось, спасибо!

0

#20ovesti.ru

  • 16 июля 2012 16:58
  • Регистрация: 31.08.2011
  • ICQ: --
  • Комментариев: 82
  • Выкл.
Если сделано: Made in Sander, то ставлю однозначно! good

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

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

Skripters.info - все для вебмастера. Только эксклюзивный контент.

Создание шаблонов DLE, быстро и недорого! 3wave.com.ua

Бро лей на лучшую партнёрку

Почти бесплатный VDS хостинг!

Поддержи сайт
Скрипты, cms, шаблоны, статьи по раскрутке

Опросы

Как часто вы бываете на сайте?

Захожу 1-2 раза в день
1-2 часа в сутки
Более 2 часов
Почти целый день тут smile

Архив новостей
Ноябрь 2016 (7)
Октябрь 2016 (10)
Сентябрь 2016 (8)
Август 2016 (11)
Июль 2016 (14)
Июнь 2016 (17)

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

Искать людей

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