Прокрутить вверх/вниз, используя процент в jquery?

Я сделал навигацию по страницам с помощью кнопки прокрутки вверх и вниз. Проблема в том, что при использовании простых значений, кроме процентов, одна из моих кнопок не будет отображаться из-за меньшего количества содержимого.

Итак, мой вопрос заключается в том, как изменить код, чтобы кнопка изменилась, если вы достигнете, например. 60% или менее 60% страницы?

Я читал разные сообщения, например эта почта или эта почта, но код не соответствует моим потребностям или я не знаю, как использовать их для своего пользовательского кода.

jQuery(function($){

$(document).scroll(function() {
  var y = $(document).scrollTop();
  if (y > 1500) {
      $(this).find('.icon-arrow-m').removeClass('icon-arrow-m');
      $('a.scroll:nth-child(1) > i:nth-child(1)').addClass("icon-arrow-up");
  } else if (y <= 1500){
      $(this).find('.icon-arrow-up').removeClass('icon-arrow-up');
      $('a.scroll:nth-child(1) > i:nth-child(1)').addClass('icon-arrow-m');
  }
});

 $(".scroll").click(function(event){
    var y = $(document).scrollTop();
    var down = y+4800;
 		if ($(this).find('.icon-arrow-up').hasClass('icon-arrow-up')) {
    	$('html, body').animate({scrollTop: '0'}, 800);
    } else {
    	$('html, body').animate({scrollTop: down}, 800);
    }
   
   
 });
});

Чтобы протестировать код, вы можете перейти на мой Главная страница, где я использую этот скрипт.

Обновлен код - исправлена прокрутка вниз

 jQuery(function($){

$(document).scroll(function() {
  var y = $(document).scrollTop();
  if (y > 1500) {
      $(this).find('.icon-arrow-m').removeClass('icon-arrow-m');
      $('a.scroll:nth-child(1) > i:nth-child(1)').addClass("icon-arrow-up");
  } else if (y <= 1500){
      $(this).find('.icon-arrow-up').removeClass('icon-arrow-up');
      $('a.scroll:nth-child(1) > i:nth-child(1)').addClass('icon-arrow-m');
  }
});

 $(".scroll").click(function(event){
    var y = $(document).scrollTop();
    var down = y+4800;
 		if ($(this).find('.icon-arrow-up').hasClass('icon-arrow-up')) {
    	$('html, body').animate({scrollTop: '0'}, 800);
    } else {
    	$('html, body').animate({scrollTop:  $(document).height()}, 800);
    }
   
   
 });
});

Я просматривал ваш живой сайт, можете ли вы подтвердить, что проблема связана с функцией нижней прокрутки, которая не достигает фактической нижней части страницы?

— 27.05.2019 10:51

Да, кнопка не прокручивается полностью.

— 27.05.2019 10:56

Вы можете попробовать это? $('html, body').animate({scrollTop: $(document).height() }, 800);

— 27.05.2019 10:57

Хорошо, теперь прокрутка вниз должна работать правильно. Может быть проблема в прокрутке? На других страницах проблем не нашел. Обновлено: На эта страница все еще есть проблема.

— 27.05.2019 11:04

Я думаю, это происходит из-за того, что страница короче 1500 пикселей. Вам следует рассмотреть другой подход, определяющий, была ли страница прокручена более или менее 50%.

— 27.05.2019 11:13

Вот почему мне нужна помощь с кодом. Я нашел разные коды для процентных значений, но я не уверен, что использую jquery, чтобы правильно поместить его в свой скрипт.

— 27.05.2019 11:16

попробую сформулировать ответ

— 27.05.2019 11:25

jquery

27.05.2019 10:44

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете рассчитать 50%, разделив высоту страницы на 2 (см. var x во фрагменте кода):

 jQuery(function($){

$(document).scroll(function() {

  var y = $(document).scrollTop(); // AMOUNT OF SCROLL FROM TOP
  var x = $(document).height() / 2; // HALF OF PAGE HEIGHT

  if (y > x) { // SCROLL IS OVER 50% OF PAGE HEIGHT
      $(this).find('.icon-arrow-m').removeClass('icon-arrow-m');
      $('a.scroll:nth-child(1) > i:nth-child(1)').addClass("icon-arrow-up");
  } else { // SCROLL IS LESS THAN 50% OF PAGE HEIGHT
      $(this).find('.icon-arrow-up').removeClass('icon-arrow-up');
      $('a.scroll:nth-child(1) > i:nth-child(1)').addClass('icon-arrow-m');
  }
});

 $(".scroll").click(function(event){
 		if ($(this).find('.icon-arrow-up').hasClass('icon-arrow-up')) {
    	$('html, body').animate({scrollTop: '0'}, 800);
    } else {
    	$('html, body').animate({scrollTop:  $(document).height()}, 800);
    }
   
   
 });
});

Думаю, это именно то, что я ищу. Не могу найти никаких проблем, и это работает также на страницах с самой короткой высотой содержимого.

— 27.05.2019 11:33

рад слышать

— 27.05.2019 11:35

27.05.2019 11:28