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

Question

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

我在一个网站上工作，该网站具有使用按钮向下滚动 div 的功能。我做到了。现在我想要当有人通过单击向下滚动按钮到达 div 的底部时，该按钮变成向上滚动按钮并在 div 的顶部占据 him/her。

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

<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 上下切换 classes 并检查是否 class 存在以确定是否向上或向下滚动：

<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

Scroll up a div when scrolling down is finished using one button

javascript

css

jquery

scroll