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

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

#21Hunter__

  • 17 июля 2012 23:01
  • Регистрация: 12.09.2010
  • Был(а) онлайн: 26.10.2013
  • Комментариев: 22
  • 0
поделитесь исходниками боковых информеров

#22fasol

  • 18 июля 2012 04:59
  • Регистрация: 31.01.2010
  • Был(а) онлайн: 15.10.2015
  • Комментариев: 77
  • -1
Колотить-итить. Этот сделанный велосипед ещё и с квадратными колёсами и снова не нужные скрипты...

Оформить стилем картиночку под ховер-бэк:

a.gotop{background:url('http://site.ru/images/pic.gif');
display:block;
opacity:0.3;-moz-opacity:0.3;filter:alpha(opacity=40);}


Фиксануть её в определённой части экрана, прикрутив при необходимости якоря в нужной части:

<div style="position:fixed;top:310px;left:2px;"><a class="gotop" id="banners" href="#news" title="Перейти вверх сайта"></a></div>


Не, я конечно понимаю, что с гемороем жить интереснее...

#23Nuf-Nuf

  • 18 июля 2012 16:52
  • Регистрация: 18.07.2012
  • Был(а) онлайн: 3.09.2012
  • Комментариев: 7
  • -1
Давно искал не мог найти, спасибо раз скрипт и за красивую картинку

#24fasol

  • 19 июля 2012 23:12
  • Регистрация: 31.01.2010
  • Был(а) онлайн: 15.10.2015
  • Комментариев: 77
  • 0
Есть вот такой велосипед - более скоростной:

<a href="javascript:window.scrollTo(0,0);">Вверх</
a>

Вместо слова "вверх" можно картинку указать.

#25Julius

  • 23 июля 2012 01:53
  • Регистрация: 1.01.2011
  • Был(а) онлайн: 19.06.2016
  • Комментариев: 171
  • 0
подскажите пожалуйста как сделать эту кнопку вверху слева?

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

#26SaD

  • 23 июля 2012 02:06
  • Регистрация: 23.02.2011
  • Был(а) онлайн: 8.01.2020
  • Комментариев: 498
  • +3
Велосипед от меня. Может кому понравится: http://bit.ly/NquTtL

kiss3

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

#27BanditNN

  • 10 августа 2012 23:48
  • Регистрация: 10.08.2012
  • Был(а) онлайн: 10.09.2013
  • Комментариев: 1
  • 0
спасиб, все работает )

#28fifinka

  • 31 августа 2012 01:20
  • Регистрация: 29.08.2012
  • Был(а) онлайн: 7.01.2013
  • Комментариев: 1
  • 0
Установил способом с xsonz как посоветовал CamStyle, проще некуда.
Только адрес изображения подкорректировал на {THEME}/images/ups.png
А в целом очень доволен, спасибо!

#29NoEvil

  • 9 сентября 2012 16:37
  • Регистрация: 1.07.2012
  • Был(а) онлайн: 17.04.2018
  • Комментариев: 25
  • 0
Спасибо, забрал, подключил через *.js - проблем не возникло)

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

#30kinoxi

  • 23 сентября 2012 16:01
  • Регистрация: 4.06.2010
  • Был(а) онлайн: 15.11.2023
  • Комментариев: 71
  • 0
Большое спасибо. Работает!!

#31Serzant

  • 10 октября 2012 15:10
  • Регистрация: 3.02.2010
  • Был(а) онлайн: 12.02.2013
  • Комментариев: 2
  • 0
Работает, спасибо.

#32xoxa99

  • 6 января 2013 13:55
  • Регистрация: 15.01.2011
  • Был(а) онлайн: 12.03.2022
  • Комментариев: 87
  • 0
Цитата: SaD
Может кому понравится: http://bit.ly/NquTtL

спасибо! то, что нужно !!!

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

#33zzoom2

  • 22 февраля 2013 15:42
  • Регистрация: 20.02.2010
  • Был(а) онлайн: 5.06.2019
  • Комментариев: 7
  • 0
Julius, поддерживаю, как поставить слева?

#34vitnet

  • 22 февраля 2013 16:12
  • Регистрация: 18.09.2010
  • Был(а) онлайн: 12.05.2024
  • Комментариев: 304
  • 0
zzoom2,

#35zzoom2

  • 22 февраля 2013 16:45
  • Регистрация: 20.02.2010
  • Был(а) онлайн: 5.06.2019
  • Комментариев: 7
  • 0
vitnet,
спасибо большое! я уже сделал через css вот так left: 10%; вроде тоже нормально

#36kobzarenko3

  • 14 октября 2014 10:44
  • Регистрация: 19.01.2012
  • Был(а) онлайн: 24.10.2014
  • Комментариев: 1
  • 0
Кнопка поставилась и работает, но прокрутка вверх не плавная. Как можно это исправить?

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

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

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