llgruff
@llgruff
Scala

Как регулировать скорость прокрутки страницы для кнопок «Вверх», «Вниз»?

Раньше на сайте использовался код, который позволял прокручивать ("возвращать") страницу только вверх :
$(document).on("scroll",function(){
	$("#up").css("opacity",(parseFloat(($(document).scrollTop()-300)/3000)));});
	$("body").on("click","#up",function(){
	$('body, html').animate({scrollTop:0},800);return false;
});


Решил воспользоваться решением с сайта learn.javascript.ru/task/knopka-vverh-vniz:
$(document).on("scroll",function(){
$("#updown").css("opacity",(parseFloat(($(document).scrollTop()-300)/3000)));});
var updownElem = document.getElementById('updown');
var pageYLabel = 0;
updownElem.onclick = function() {  var pageY = window.pageYOffset || document.documentElement.scrollTop;
  switch(this.className) {
	case 'up':
	  pageYLabel = pageY;
	  window.scrollTo(0, 0);
	  this.className = 'down';
	  break;
	case 'down':
	  window.scrollTo(0, pageYLabel);
	  this.className = 'up';
}}
window.onscroll = function() {
  var pageY = window.pageYOffset || document.documentElement.scrollTop;
  var innerHeight = document.documentElement.clientHeight;
  switch(updownElem.className) {
	case '':
	  if (pageY > innerHeight) {updownElem.className = 'up';}
	  break;
	case 'up':
	  if (pageY < innerHeight) {updownElem.className = '';}
	  break;
	case 'down':
	  if (pageY > innerHeight) {updownElem.className = 'up';}
	  break;
}}


Теперь при нажатии кнопок "вверх", "вниз" страница резко перескакивает.
Как изменить код во втором случае, чтобы можно было установить плавную скорость прокрутки?
Благодарю за ответ.
  • Вопрос задан
  • 4180 просмотров
Решения вопроса 1
llgruff
@llgruff Автор вопроса
Scala
Замена 3-х строк:
1. window.scrollTo(0, 0);
на $('body, html').animate({scrollTop:0},1000);
2. window.scrollTo(0, pageYLabel);
на $('body, html').animate({scrollTop:pageYLabel},1000);
3. if (pageY < innerHeight) {updownElem.className = '';}
на if (pageY < innerHeight) {updownElem.className = 'down';}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
В комментариях урока по вашей ссылке уже есть аналог решения с учетом этой проблемы, второй с низу
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы