Мы в твиттере Мы в телеграме!

Провеббер » Web » Скрипты » Кнопка "Наверх"

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?
Обращайся к нам в ЛС группы Вконтакте.

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

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

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

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

Установка довольно таки проста, но надо как минимум уметь создавать/редактировать файлы и подключать 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
Просмотры: 11 225 :: Комментарии (36) :: :: Нужна помощь? Задайте вопрос на форуме ::
Теги: Наверх, Sander
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1jostic

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

#2hell

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

#3jostic

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

#4Sander

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

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

#5jostic

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

#6Sander

  • 15 июля 2012 15:42
  • Регистрация: 19.02.2010
  • Был(а) онлайн: 20.04.2021
  • Комментариев: 327
  • +1
Поразительно, неужели проще просидеть пол дня в ожидании ответа, чем вбить этот же вопрос в поисковике гугла?

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

#7bucefal82

  • 15 июля 2012 15:52
  • Регистрация: 11.01.2011
  • Был(а) онлайн: 27.05.2015
  • Комментариев: 156
  • 0
Допиши в свой 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;}


И всё

#8SaD

  • 15 июля 2012 15:55
  • Регистрация: 23.02.2011
  • Был(а) онлайн: 8.01.2020
  • Комментариев: 498
  • 0
scroll_start=30;

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

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

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

#9AltRock

  • 15 июля 2012 16:10
  • Регистрация: 28.02.2011
  • Был(а) онлайн: 26.10.2013
  • Комментариев: 119
  • 0
все работает спс:)

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

#10bitfam

  • 15 июля 2012 16:39
  • Регистрация: 10.03.2012
  • Был(а) онлайн: 27.09.2021
  • Комментариев: 115
  • 0
так файл gotop.js самому делать или переименовать надо файл knopka.js ?

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

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

#11AltRock

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

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

#12bitfam

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

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

#13AltRock

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

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

#14daiv777

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

#15bitfam

  • 15 июля 2012 17:48
  • Регистрация: 10.03.2012
  • Был(а) онлайн: 27.09.2021
  • Комментариев: 115
  • 0
daiv777,сделал как вы сказали получилось , а другие способы че не получились

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

#16Dinamit87

  • 15 июля 2012 18:41
  • Регистрация: 2.06.2012
  • Был(а) онлайн: 5.04.2013
  • Комментариев: 2
  • 0
установил
все работает,спасибо )

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

#17CamStyle

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

#18249893

  • 15 июля 2012 20:24
  • Регистрация: 14.09.2011
  • Был(а) онлайн: 16.06.2021
  • Комментариев: 14
  • 0
в чем прикол в этой кнопке? в нете такие есть

#19Cresis

  • 16 июля 2012 01:10
  • Регистрация: 18.07.2011
  • Был(а) онлайн: 3.11.2023
  • Комментариев: 282
  • 0
Все получилось, спасибо!

#20ovesti.ru

  • 16 июля 2012 16:58
  • Регистрация: 31.08.2011
  • Был(а) онлайн: 9.10.2023
  • Комментариев: 81
  • -2
Если сделано: Made in Sander, то ставлю однозначно! good

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

Архив новостей
Ноябрь 2024 (9)
Октябрь 2024 (169)
Сентябрь 2024 (13)
Август 2024 (60)
Июль 2024 (12)
Июнь 2024 (30)

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