Question

我搜索了堆栈溢出的解决方案，但我没有找到。这就是我要问解决方案的原因。我不擅长jQuery。

我正在开发一个网站，它具有使用按钮向下滚动div的功能。我做到了。现在我想当有人通过单击向下滚动按钮到达div的底部时，按钮变成向上滚动按钮并将他/她带到div的顶部。

下面是我的向下滚动代码。

<div id="testi-scroll">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
</div>

<button class="scroll-up"><img src="gotop-arrow.png" alt="gotop-arrow" /></button>

<script>
var scrolled=0;
jQuery(document).ready(function(){
jQuery(".scroll-dwn").on("click" ,function(){
    scrolled=scrolled+150;

    jQuery("#testi-scroll").animate({
            scrollTop:  scrolled
       });

});

});
</script>

Answer 1

如果没有您的HTML，很难为您提供具体的答案，但这里有一个建议：使用.toggleClass来上下切换类，并检查该类是否存在以确定是向上还是向下滚动：

<script>
jQuery(document).ready(function(){
  jQuery(".scroll-btn").on('click', function(){
    jQuery(this).toggleClass('scroll-down')
    if ( jQuery(this).hasClass('scroll-down') ) { 
      $('html, body').animate({
        scrollTop: $("#element").offset().top
      }, 2000);
    } else {
      $('html, body').animate({
        scrollTop: $("#element").offset().top
      }, 2000);
    }
  });
});
</script>

Answer 2

我不建议将scrolled变量初始化为零，并在用户点击按钮时更新，因为这种方法并不能解释用户点击时的情况拖动滚动条而不是使用按钮。

以下是我如何解决问题的方法。你可以找到jsfiddle here

jQuery(document).ready(function(){
  jQuery(".scroll-btn").on('click', function(){

      if($(this).hasClass("scrollup")){
          $("#testi-scroll").animate({
              scrollTop: 0
          }, 200);
          $(this).removeClass("scrollup");
          $(this).text("Scroll Down");
      } else {
          var scrolled = $("#testi-scroll")[0].scrollTop;
          scrolled += 150;

          $("#testi-scroll").animate({
              scrollTop: scrolled
          }, 200);    

          var scrollHeight = $("#testi-scroll")[0].scrollHeight;
          var divHeight = $("#testi-scroll").height();

          if(scrolled >= scrollHeight- divHeight){
              $(this).addClass("scrollup");
              $(this).text("Scroll Up");
          }
      }
  });
});

使用一个按钮完成向下滚动时向上滚动div

2 个答案: