zulyamodx,
|
Цитата:
|
|
Дорогие разработчики jQuery! Пожалуйста, напишите хоть что нибудь.
|
Здесь, вообще-то, не разработчики jQuery, а обычные люди - такие же, как и вы.
Пример листания по 150px (510 для примера многовато)
<style>
.go-up,
.go-down {
position: fixed; /*позиционируем*/
right: 5px; /*указываем положение, если слева - left*/
z-index: 9999; /*показываем поверх все элементов на странице*/
background: #4F4F4F;
border: 2px solid #ccc; /*толщина, стиль, цвет рамки*/
box-shadow: 0 10px 0.3em -0.1em rgba(0,0,6,0.5); /*тень*/
border-radius: 10px;
cursor: pointer;
color: #fff; /*цвет стрелок*/
text-align: center; /*выравнивание*/
font-size: 42px; /*размер стралок*/
text-shadow: 0 1px 2px #000, 0 0 10px #E0F1FF;
opacity: .7; /*прозрачность*/
padding: 0 3px 5px 3px; /*отступы внутри*/
margin-bottom: 5px; /*отступ снизу (можно не указывать)*/
width: 48px; /*ширина кнопки*/
height: 48px; /*высота кнопки*/
}
.go-up {
bottom: 70px; /*положение от низа окна браузера*/
}
.go-down {
bottom: 10px;
}
.down { }
/*стили при наведении курсора*/
.go-down:hover,
.go-up:hover {
opacity: 1;
}
</style>
<body>
<div style='width:300px'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div style='width:300px'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="go-up" title="Вверх" id='up'>⇧</div>
<div class="go-down" title="Вниз" id='down'>⇩</div>
</body>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script>
$('#down').on('click', function() {
var scroll = Math.max($("body").scrollTop(),$("html").scrollTop()) + 150;
$("body,html").animate({"scrollTop":scroll}, 1000);
});
$('#up').on('click', function() {
var scroll = Math.max($("body").scrollTop(),$("html").scrollTop()) - 150;
$("body,html").animate({"scrollTop":scroll}, 1000);
})
</script>
