Прокрутка страницы на 510px вверх и вниз по клику

 
0
 
JavaScript
ava
zulya | 27.11.2016, 16:46
Здравствуйте.
Я вообще ничего не знаю о 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/e...llto/index.html Чем-то похожее.

Вы можете помочь?
Kommentare (0)

Kommentare werden nicht hinzugefügt

Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
  zulya
advanced
Absenden