» »

Функциональная кнопка вверх для сайта


Функциональная кнопка вверх для сайта

Отличное решение на сайт по подъему страницы, так как кнопка появится в правом нижнем углу, когда вы опустите в самый низ сайта. При подъеме на вверх она автоматически исчезнет. Здесь работа скрипта и по скорости он не быстрый и не медленный, она стандартная. Что главное, код идет отдельно, точнее ниже, что у вас есть возможность сменить само изображение.

Это может быть надпись, но на картинке, или простая стрелка. Кто то делает под свою тематику на сайте. Так, что вот рабочий и проверенный код на тестовом сайте, а оставлять как есть по умолчанию, или сменить на что то свое, вам виднее, ниже будет картинка, как на темном фоне и вообще где установлена и появятся будет этот режим.

Изображение с проверочного "Тестового сайта" на работоспособность.

Скрипт на кнопку вверх для сайта uCoz

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

Идем в админ панель и потом в низ сайта, и там устанавливаем, можно в самый подвал поставить, все равно появиться и будет работать.

Код
<a href="javascript://" onclick="$('body').scrollTo({top:$('body').offset().top, left:0}, 800);return false;">  
  <div style="position:fixed; opacity:0.8; bottom:0px; right:0px;" id="fImgtotop"><img  
  title="Вверх" src="http://zornet.ru/zorner_ru_1/aves/up-cvseormxsk.png" border="0"></div>  
  </a>  
   
  <script type="text/javascript">  
  jQuery(function() {  
  var overelem = jQuery('body');  
   
  jQuery('#nav_up').fadeIn('slow');  
  jQuery('#nav_down').fadeIn('slow');  
   
  jQuery('#nav_down').click(  
  function (e) {  
  jQuery('html, body').animate({scrollTop: overelem.height()}, 800);  
  }  
  );  
  jQuery('#nav_up').click(  
  function (e) {  
  jQuery('html, body').animate({scrollTop: '0px'}, 800);  
  }  
  );  
  });  
  </script>

Как все сделали, сохраняем, и перезагрузив страницу, она появиться. Есть такая тема, у кого резчик рекламы стоит и некоторые просто не появляются, это в любом случай увидите.
31.05.2017 Просмотров: 246 Комментарий: (0)

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

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

Комментарий: 0
avatar