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

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

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

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

На главной страницы вашего сайта, между тегами вставляем
<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>

Пути image/go_up.png и image/go_bottom.png меняем на свои
Вот и все.
В заключении можете скачать несколько кнопок в формате PNG размером 48х48
Скачать
Скачать knopki.rarРазмер 98,18 Kbcкачиваний: 102

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