Question

所以我希望我的问题是明确的！我在页面顶部有一个div，当我滚动并点击页面末尾时，我希望div移动到底部，我想你明白了！

如果有人作为一个想法，我正在接受它;）

Answer 1

尝试使用scroll方法使用animate()事件，并使用标记scroll来确保div只会被移动一次：

var scroll = true;

$(document).on('scroll', function(){
    var my_div = $("#my-div");

    if(scroll){
       scroll=false;

       my_div.animate({
          top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
       }, 1000);
    }
})

希望能给你一个想法。

＆＃13;

var scroll = true;

$(document).on('scroll', function(){
  var my_div = $("#my-div");

  if(scroll){
    scroll=false;

    my_div.animate({
      top : $('body').height() - my_div.offset().top - my_div.outerHeight(),
    }, 1000);
  }
})

＆＃13;

html, body { height: 500px; }

#my-div { 
  position: absolute;
  top: 0; 
  left: 0;
  width: 90%;
  height: 100px; 
  border: 1px solid green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my-div"></div>

＆＃13;

Answer 2

您可以检测用户何时滚动到页面底部，然后将顶部属性从0转换为窗口高度减去该元素的高度。

$(window).scroll(function() {
  if($(window).scrollTop() + $(window).height() == $(document).height()) {
    $('div').css({
      top: $(window).height() - $('div').height()
    });
  }
});

当我滚动到页面末尾时，如何将div从页面顶部放到底部

2 个答案:

CODEPEN