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

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

  • 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/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>


После подключения библиотеки jQuery, добавьте между тегами код
<script type="text/javascript">
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
[98,18 Kb]
( 209 )

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