使用 jquery 向下滚动到#lower div

【问题标题】：Using jquery to scroll down to #lower div使用 jquery 向下滚动到#lower div
【发布时间】：2016-01-01 02:30:30
【问题描述】：

我正在尝试使用 jquery 向下滚动到 #lower div，但由于某种原因它无法正常工作。我做错了什么？

$(function() {

  $('html, body').animate({
    scrollTop: $("#lower").offset().top;
  }, 0); //end of animate 

}); //end of $(function()

#upper {
  border: 1px solid red;
  width: 100%;
  height: 100%;
}
#lower {
  border: 1px solid blue;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div id='upper'>Upper</div>
<div id='lower'>Lower</div>

【问题讨论】：

您的 DIV 太小，无法向下滚动。
@Barmar 嗯，我的 div 有 100% 的宽度和高度...
@Barmar 是 stackoverflow 让它看起来如此之小......

标签： javascript php jquery scroll vertical-scrolling

【解决方案1】：

尝试删除 ; : Uncaught SyntaxError: Unexpected token ; 跟随 $("#lower").offset().top ;将top 属性添加到#lower 大于window.innerHeight 以提供#upper 、#lower 元素之间的视口距离

$(function() {

  $('html, body').animate({
    scrollTop: $("#lower").offset().top
  }, 0); //end of animate 

}); //end of $(function()

#upper {
  border: 1px solid red;
  width: 100%;
  height: 100%;
}
#lower {
  top:300px;
  position:relative;
  border: 1px solid blue;
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<div id='upper'>Upper</div>
<div id='lower'>Lower</div>

【讨论】：

可以说滚动到比#lower高几个像素吗？
@jessica “可以说滚动到比#lower 高几个像素吗？” 是的。尝试在$("#lower").offset().top 之后添加`-n`，其中n 是一个数值；例如，$("#lower").offset().top - 125