Итак, первым делом создаём в нашем любимом Notepad++ (или кому в чем нравится) пустой html файл и записываем начало (заголовок, кодировку и подгружаем библиотеку jQuery)
<html>
<head>
<title>Автопрокрутка страницы вверх</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
<head>
<title>Автопрокрутка страницы вверх</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.js"></script>
Далее, как и условились, инлайном записываем стили:
<style type="text/css">
.scroll-to-top-button{
background: #666 url(upload.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;
}
</style>
.scroll-to-top-button{
background: #666 url(upload.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;
}
</style>
Где upload.png - картинка, которую мы применяем для кнопки запуска автопрокрутки (как правило - стрелка вверх). Поле под ней оформлено с помощью атрибутов CSS 3.0.
Далее - записываем сам скрипт:
<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>
</head>
(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>
</head>
Где активатор означает следующее:
scrollDuration: 2000 - длительность прокручивания в миллисекундах
showDuration: 600 - длительность появления кнопки при прокрутке в миллисекундах
hideDuration: 300 - длительность исчезновения кнопки в миллисекундах
showDuration: 600 - длительность появления кнопки при прокрутке в миллисекундах
hideDuration: 300 - длительность исчезновения кнопки в миллисекундах
Далее - идет произвольное и длинное содержание страницы. Не забудьте её закрыть:
</body>
</html>
</html>
Вот и всё. Надеюсь вам понравилось.
Комментариев нет:
Отправить комментарий