Автопрокрутка вверх страницы
Стрелочка прокрутки до верха страницы на jQuery.
HTML
Один DIV блок, вставляем в любое место тела страницы:
<div style="opacity: 0.8; position: absolute; top: 450px; right: 0px; display:none;" class="scroll-to-top-button"></div>CSS
Небольшая стилизация стрелки.
.scroll-to-top-button{
background: #777 url(up.png) center center no-repeat;
width: 32px;
height: 32px;
color: #fff;
font-family: verdana;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
cursor: pointer;
padding: 15px;
margin: 20px;
}jаvascript
Подключаем jQuery библиотеку и скрипт скроллинга:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
(function(jq) {
jq.autoScroll = function(ops) {
ops = ops || {};
ops.styleClass = ops.styleClass || 'scroll-to-top-button';
var t = jq('<div class="+ops.styleClass+"></div>'),
d = jq(ops.target || document);
jq(ops.container || 'body').append(t);
t.css({
opacity: 0,
position: 'absolute',
top: 0,
right: 0
}).click(function() {
jq('html,body').animate({
scrollTop: 0
}, ops.scrollDuration || 1000);
});
d.scroll(function() {
var sv = d.scrollTop();
if (sv < 10) {
t.clearQueue().fadeOut(ops.hideDuration || 200);
return;
}
t.css('display', '').clearQueue().animate({
top: sv,
opacity: 0.8
}, ops.showDuration || 500);
});
};
})(jQuery);
$(document).ready(function(){
$.autoScroll({
scrollDuration: 2000,
showDuration: 600,
hideDuration: 300
});
});
</script>Ссылки
