2

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

我正在寻找添加另一个滚动到几乎在我的页面底部的特定 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;
   });

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

4

4 回答 4

1

这是一个小提琴 ，对我来说似乎很好。

我刚刚添加了示例 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;
}

我留下了你的剧本。

于 2013-04-08T15:53:19.357 回答
1

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;
   });

例子

于 2013-04-08T15:58:43.537 回答
1

我的猜测（这就是我们所拥有的一切）是你混淆了一个类的 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;
});
于 2013-04-08T16:34:49.983 回答
0

如果您有一个 div 并在其上设置了一个 ID，您可以在 HTML 中执行此操作：

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

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

于 2013-04-08T15:52:45.663 回答