Question

我进行了页面导航，并滚动到顶部和底部按钮。问题是：使用简单的值（百分比除外）会因为内容较少而不会显示我的按钮之一。

所以我的问题是如何更改代码，以便在到达例如页面的60％或少于60％？

我阅读了不同的帖子，例如this post或this post，但是代码不符合我的需求，或者我不知道如何将其用于自定义代码。

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);
    }
   
   
 });
});

要测试代码，可以将我的main page转到我正在使用此脚本的位置。

更新的代码-固定滚动到底部

 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);
    }
   
   
 });
});

Answer 1

您可以计算出页面高度的2乘以50％（请参见代码段中的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);
    }
   
   
 });
});

使用jquery中的百分比滚动到顶部/底部？

1 个答案: