滚动到 div jQuery [重复]答案

【问题标题】：Scroll to div jQuery [duplicate]滚动到 div jQuery [重复]
【发布时间】：2013-04-08 15:46:35
【问题描述】：

我有两个功能，一个滚动到页面底部，另一个滚动到顶部。

我希望添加另一个功能，该功能可以滚动到几乎位于页面底部的特定 div。我在下面包含了我的两个功能滚动功能以及我的第三次尝试，但它不能正常工作。它滚动到我的页面底部，然后跳到 div。

   //works
   $('.btn1').click(function(){
     $('html, body').animate({scrollTop:0}, 750);
   });

   //works
   $('.btn2').click(function(){
     $('html, body').animate({scrollTop:$(document).height()}, 750);
     return false;
   });

   //doesn't work
   $('.btn3').click(function(){
     $('html, body').animate({scrollTop:$(".myDiv").offset().top}, 750);
     return false;
   });

任何意见或建议将不胜感激！

【问题讨论】：

你为什么在html上做animate 和 body？
我们能看到html吗？你确定<div class='myDiv'> 存在吗？
对 offset().top 做一个 console.log() 并显示结果
我在网上找到了一个简单的 tut，其中包括 ('html, body')。它对我有用，所以我认为我不应该改变它。在我的 html 中，该 div 实际上称为 .nameSpaceInfo。它肯定存在。我只是在这里称它为 .myDiv，这样更容易理解。

标签： jquery html scroll

【解决方案1】：

这是一个fiddle，我觉得很好。

我刚刚添加了示例 div

<span class="btn2">to bot</span>
<span class="btn3">to div</span>
<div class="myDiv"></div>
<span class="btn1">to top</span>
<span class="btn3">to div</span>
.myDiv
{
    height:500px;
    margin-top:500px;
    width:100%;
    background-color:#ccc;
}

我保留了你的脚本。

【讨论】：

【解决方案2】：

html

<div class="btns">
<button class="btn1">One</button>
<button class="btn2">Two</button>
<button class="btn3">Three</button>
</div>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<p>stuff</p><p>stuff</p><p>stuff</p>
<div class="myDiv">My Div</div>
<p>stuff</p><p>stuff</p><p>stuff</p>

css

.btns {
    position: fixed;
}

javascript

   //works
   $('.btn1').click(function(){
     $('html, body').animate({scrollTop:0}, 750);
   });

   //works
   $('.btn2').click(function(){
     $('html, body').animate({scrollTop:$(document).height()}, 750);
     return false;
   });

   // works
   $('.btn3').click(function(){
     $('html, body').animate({scrollTop:$(".myDiv").offset().top}, 750);
     return false;
   });

example

【讨论】：

【解决方案3】：

我的猜测（这就是我们所拥有的一切）是你混淆了一个类的 div id 并且有

<div id='myDiv'>

所以没有 .myDiv 可以滚动到。

要么把你的 html 改成

<div class='myDiv'>

或者你的 jQuery 到（注意选择器中的#myDiv）

//should work
$('.btn3').click(function(){
  $('html, body').animate({scrollTop:$("#myDiv").offset().top}, 750);
  return false;
});

【讨论】：

【解决方案4】：

如果你有一个 div 并在上面设置了一个 ID，你可以在 HTML 中这样做：

<a href="#yourDiv">Scroll to Div</a>

应该直接跳转到 DIV，它会在页面顶部。

【讨论】：