» »

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

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

Это простая кнопка вверх, которое имеет плавное скольжение поднятие страницы. Что по умолчанию стоять будет в правом нижнем углу. Безусловно сейчас в сети можно найти совершенно разные кнопки, что созданы на CSS. В нашем случай все очень просто и привлекаем только файл js и кнопку формате PNG и также GIF. Что должна уже идти по размерам, так как уже не настроить. Но есть один очень полезный ресурс, по созданию уникальный кнопок, что вы сами можете сделать для своего портала. Вот что предоставлена здесь, это там ее сделал. Но как понимаете, можно после создание привлечь фотошоп и нанести на ее градиент, чтоб смотрелось намного ярче.

Но это для тех, кому нравится яркие дизайн на своем сайте. Вы выбираете рисунок и потом выстраиваете то изображение, которое вам нужно. С начало хотел поставить что то уникальное, но не стал делать, так как возможно многие не поймут и поставил такую картинку. Так в чем плюс в этом? Это то, что самостоятельно выставляете то изображение, которое вам нужно. Теперь о поднятие вверх, которое реально красивое. И состоит в таких настройках, что плавно разгоняется и где то на половине монитора она просто исчезает, что также будет появляться, если страницу вы опускаете. Так что можно сделать как на яркий дизайн и сам конструктор, где будет фиксированная ширина.

Если вы сделаете через через сервис кнопку, то как уже сказано, там идет один оттенок, это тот который вы сами поставите. Но если хотите что свое и наложит уже на созданную кнопку градиент, то здесь фотошоп отличное будет решение, где можно все сделать на высоком уровне.

Приступаем к установке:

В низ сайта:

Код
<div style="position:relative">  
  <a href="javascript://" title="Поднять страницу" style="position: fixed; bottom: 0px; right: 4px; display: block; " id="toTop">  
  <img src="http://zornet.ru/Aben/ABGEA/Hand-Up-32.png" border="0" title=""></a>  
  </div>  
  <script src="http://zornet.ru/Aben/ABGEA/scrolllingup.js" type="text/javascript"></script>  
  <div style="position:relative">  
  <div id="scrolling-img" style="position: fixed; top: 48%; left: 45%; z-index: 9999; ">  
  </div>  
  </div>

Там стоят проценты, что вы можете отредактировать, это если у вас сильно фиксированный сайт и кнопку нужно вывести, чтоб заметна была.

Как пример, можно сделать по размерам, не говоря о том, что в центре будет установлено в плане картинки.

Скрипт на поднятие страниц сайта Создать кнопку вверх своими руками

Но больше сделал этот материал под статью, что сам веб мастер создавая сайт, ставит все оригинальное, который делает сам. Здесь только как основа идет код на кнопку вверх, который аналогично настраивается. И как дополнение, это изображение. что по клику на его будет происходить работа на поднятие страниц сайта.
04.08.2017 Просмотров: 428 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Critic©
Critic© 05.08.2017 20:481
0
Всегда пригодится на любом сайте
Critic©
Critic© 05.08.2017 20:482
0
И главное не нужно тему выбирать, а что кнопку в дизайн сделать, это смело.
Kosten
Kosten 05.08.2017 21:093
0
Это так вообщем написал, так как сам под один градиент ставил и кнопка совершенно по другому засияла, потому и написал, что не только на сервис выбрать цвет, то и стиль можно потом свой на его сделать.
Critic©
Critic© 06.08.2017 19:024
0
Kosten, ещё хотел задать вопрос: можно поменять цвет кнопки?
Kosten
Kosten 06.08.2017 20:025
0
Так в описание написано за эту тему. Так как кнопки создаются на одном сервис, ссылка представлена. Что при создание вы сами выбираете гамму цвета на кнопку и вообще саму кнопку по дизайн.
avatar