Кнопки плавной прокрутки для сайта
Данный материал предоставлен сайтом All4Cms.ru исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Кнопки плавной прокрутки для сайта.
Скачать бесплатно Кнопки плавной прокрутки для сайта.
![Кнопки плавной прокрутки для сайта](http://all4cms.ru/uploads/posts/2012-11/1353442923_cover.jpg)
Первый скрипт добавляет на сайт кнопку "Вверх". Которая будет отображаться в правом нижнем углу. При прокручивании страницы вниз кнопка плавно появляется, при прокручивании вверх - исчезает.В неактивном состоянии кнопка имеет полупрозрачный вид.
На главной страницы вашего сайта, между тегами [/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
![](/templates/themeresponse/images/icons/rar.png)
knopki.rar
MD5: b3a79b88faee401e9d8dcbb728086db1
Скачано: 548, размер: [98,18 Kb], дата: 21 ноябрь 2012
- Вебмастеру / Скрипты
- 21-11-2012, 01:07
- 10 497