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

Question

[Roman]

Раньше на сайте использовался код, который позволял прокручивать ("возвращать") страницу только вверх :

$(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;
}}

Теперь при нажатии кнопок "вверх", "вниз" страница резко перескакивает.
Как изменить код, чтобы можно было установить плавную скорость прокрутки?
Благодарю за ответ.

Comments

[Стас Денсис]

смотри: $('body, html').animate({scrollTop:0},800);return false;});

scrollTop 0 - это куда скролить. то есть на верх
800 это скорость, точнее за сколько миллисек. 800 - 0.8 сек. хочешь чтоб медленно , ставь 1500 например.

[Roman]

deenween: это вы прокомментировали 1-ый код (старый), с ним всё понятно, меня интересуют изменения во 2-ой код

[Стас Денсис]

$('a[href^="#"], a[href^="."]').click( function(){ // если в href начинается с # или ., то ловим клик
var scroll_el = $(this).attr('href'); // возьмем содержимое атрибута href
if ($(scroll_el).length != 0) { // проверим существование элемента чтобы избежать ошибки
$('html, body').animate({ scrollTop: $(scroll_el).offset().top-100 }, 500); // анимируем скроолинг к элементу scroll_el
}
return false; // выключаем стандартное действие
});

------------------------
вот что наше у себя.

попробуй так
создай элемент с id="bottom"
и

$('html, body').animate({ scrollTop: $("#bottom").offset().top }, 500);

[Стас Денсис]

в подвале страницы.

Answer 1

[Anton Kolesnikov]

На место window.scrollTo(0, 0) вставить $('body, html').animate({scrollTop:0},800);return false;}).

Если листаем вниз, то не 0, а pageYLabel на сколько я понял.

Comments

[Roman]

Спасибо за ответ.
Я вас правильно понял? Попробовать вместо строки:
window.scrollTo(0, 0);
вставить:
$('body, html').animate({scrollTop:0},800);return false;});

,а вместо:
window.scrollTo(0, pageYLabel);
вставить:
$('body, html').animate({scrollTop:pageYLabel},800);return false;});

[Anton Kolesnikov]

Ну да.

window.scrollTo(0, 0) просто устанавливает значение scrollTo на 0. Поэтому страница и перескакивает.

А animate плавно увеличивает значение window.scrollTo до второго параметра в скобках, то есть 0, при движении вверх и pageYLabel при движении вниз.

[Roman]

kejinzo:
Спасибо! Помогла замена 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';}

Answer 2

[Игорь Воротнёв]

А при чем здесь тег WordPress?

Answer 3

[Стас Денсис]

у тебя две кнопки. вниз и вверх.
заменит это js код на простой, с Jquery.

function down(){
    
$('html, body').animate({ scrollTop: $("#footer").offset().top }, 500); 
}

function up(){
    
$('html, body').animate({ scrollTop: 0 }, 500); 
}

Jquery - магия)