Javascript-форум - Плавная прокрутка вверх и вниз по пикселю с помощью jquery

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Плавная прокрутка вверх и вниз по пикселю с помощью jquery (https://javascript.ru/forum/jquery/66117-plavnaya-prokrutka-vverkh-i-vniz-po-pikselyu-s-pomoshhyu-jquery.html)

Плавная прокрутка вверх и вниз по пикселю с помощью jquery

Здравствуйте.
Вы можете помочь изменить код js/css чтобы плавная прокрутка прокручивалась по 510px при клике вверх и вниз? То есть, при клике на кнопку вверх и вниз, страница прокручивалась на 510px вверх или вниз.
Есть следующий код:

<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>

<div class="go-up" title="Вверх" id='ToTop'>⇧</div>
<div class="go-down" title="Вниз" id='OnBottom'>⇩</div>

Код:

.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;

}

Заранее спасибо!

Значит моему вопросу нет решения? Если нет решения, пожалуйста, напишите, что нет решения. Я надеясь, что мне ответят, с утра жду, что мне хоть кто ответит. Спасибо!

Вроде нашла похожий скрипт, вот тут http://www.xiper.net/examples/js-plu...lto/index.html
Но в моем случае, должны быть 2 стрелки - вверх и вниз.
В моем случае, каждый раз при клике на стрелки, страница должна прокручиваться на 510px вверх (если клик делается по стрелке вверх), 510 вниз (если клик делается по стрелке вниз).
Помогите пожалуйста.

Дорогие разработчики jQuery! Пожалуйста, напишите хоть что нибудь.

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>

Работает! Большое спасибо!