Все для CMS » Вебмастеру » Кнопки плавной прокрутки для сайта

Кнопки плавной прокрутки для сайта

  • 1
Данный материал предоставлен сайтом All4Cms.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Кнопки плавной прокрутки для сайта.
Кнопки плавной прокрутки для сайта

Первый скрипт добавляет на сайт кнопку "Вверх". Которая будет отображаться в правом нижнем углу. При прокручивании страницы вниз кнопка плавно появляется, при прокручивании вверх - исчезает.В неактивном состоянии кнопка имеет полупрозрачный вид.

На главной страницы вашего сайта, между тегами [/b] вставляем

<script>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()>="100"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()<="1000"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function(){$("#toTo_button").scrollToTop();});
</script>
<style>
#toTo_button { width:70px;text-align:center;padding:5px;position:fixed;bottom:10px;right:12px;cursor:pointer;color:#666;text-decoration:none; }
#ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha(opacity=70); }
#ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100); }
</style>
<div id="ups">
<a href="/" id="toTo_button"><img src="http://Ваш_сайт.ру/images/ups.png" alt="" /></a>
</div>

Где http://Ваш_сайт.ру/images/ups.png меняем на свой путь к картинки

Второй скрипт прокручивает страницу вверх и вниз.
Если не подключена библиотека jQuery, подключаем
<script type="text/jаvascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>


После подключения библиотеки jQuery, добавьте между тегами код
<script type="text/jаvascript">
jQuery(function(){
 $("#Go_Top").hide().removeAttr("href");
 if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")
  else $("#Go_Top").fadeIn("slow")
 });

 $("#Go_Bottom").hide().removeAttr("href");
 if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
 $(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
  else $("#Go_Bottom").fadeIn("slow")
 });

 $("#Go_Top").click(function(){
  $("html, body").animate({scrollTop:0},"slow")
 })
 $("#Go_Bottom").click(function(){
  $("html, body").animate({scrollTop:$(document).height()},"slow")
 })
});
</script>

<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
 <img src="image/go_up.png" alt="Наверх" title="Наверх">
</a>
<a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
 <img src="image/go_bottom.png" alt="Вниз" title="Вниз">
</a>

Пути [b]image/go_up.png
и image/go_bottom.png меняем на свои

Вот и все.

В заключении можете скачать несколько кнопок в формате PNG размером 48х48

knopki.rar
MD5: b3a79b88faee401e9d8dcbb728086db1
Скачано: 537, размер: [98,18 Kb], дата: 21 ноябрь 2012


  • Вебмастеру / Скрипты
  • 21-11-2012, 01:07
  • 10 470
Вернуться назад
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.