Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.11.2016, 07:20
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Плавная прокрутка вверх и вниз по пикселю с помощью 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;
}
Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2016, 15:28
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Значит моему вопросу нет решения? Если нет решения, пожалуйста, напишите, что нет решения. Я надеясь, что мне ответят, с утра жду, что мне хоть кто ответит. Спасибо!
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2016, 20:14
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Вроде нашла похожий скрипт, вот тут http://www.xiper.net/examples/js-plu...lto/index.html
Но в моем случае, должны быть 2 стрелки - вверх и вниз.
В моем случае, каждый раз при клике на стрелки, страница должна прокручиваться на 510px вверх (если клик делается по стрелке вверх), 510 вниз (если клик делается по стрелке вниз).
Помогите пожалуйста.
Ответить с цитированием
  #4 (permalink)  
Старый 27.11.2016, 13:37
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Дорогие разработчики jQuery! Пожалуйста, напишите хоть что нибудь.
Ответить с цитированием
  #5 (permalink)  
Старый 28.11.2016, 12:58
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

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>
Ответить с цитированием
  #6 (permalink)  
Старый 28.11.2016, 13:42
Аватар для zulyamodx
Интересующийся
Отправить личное сообщение для zulyamodx Посмотреть профиль Найти все сообщения от zulyamodx
 
Регистрация: 07.10.2016
Сообщений: 23

Работает! Большое спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая прокрутка дива вниз progi2007 Общие вопросы Javascript 16 16.04.2014 23:15
Как динамически изменить размер блока с флешкой из флешки с помощью jQuery Aleksandr_SAM Flash 3 30.11.2010 22:59
Подгрузка информации из БД с помощью jQuery herotic jQuery 1 25.07.2010 16:26
Как скруглить углы у картинки с помощью JQuery askel jQuery 5 08.05.2010 22:33
Авторизация в модальном окне с помощью jQuery A.N.R.I jQuery 17 01.03.2010 19:26