Здравствуйте.
Я вообще ничего не знаю о jquery. Поэтому прошу вас дать подробный ответ.
Хочу поставить стрелки вверх и вниз на сайт, с помощью которых, посетители могли прокручивать страницу вверх или вниз.
Для реализации этого нашла много скриптов. Но в моем случае, все должно быть намного по другому.
При каждом клике, страница должна прокручиваться на 510px вверх или вниз. Если кликнуть стрелку вниз, то страница прокручивается на 510px вниз. Если еще раз кликнуть стрелку вниз, то страница должна снова покрутится на 510 px вниз.
Если кликнуть на стрелку вверх, то страница должна покрутится вверх на 510 px. Каждый раз при клике на стрелку вверх, страница должна покрутится вверх на 510 px cнова и снова.
В интернете нашла такой скрипт, но он не решает мой вопрос. Он умеет только покрутит страницу вниз до самого вниза или наоборот, вверх.
| Код |
<script type='text/javascript'>
//<![CDATA[
$(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
//]]>
</script>
|
| Код |
.go-up,
.go-down {
display:none;
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;
}
/*стили при наведении курсора*/
.go-down:hover,
.go-up:hover {
opacity: 1;
}
|
| Код |
<div class="go-up" title="Вверх" id='ToTop'>⇧</div>
<div class="go-down" title="Вниз" id='OnBottom'>⇩</div>
|
Также, в интернете нашла демо одного скрипта http://www.xiper.net/examples/js-plugins/effects/scrollto/index.html Чем-то похожее.
Вы можете помочь? |