javascript - jQuery平滑滚动到页面的特定部分？

Question

如何平滑滚动到页面的特定部分？

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<a href="#" class="scrollToBottom"><img src="images/godown.png" alt="Down Arrow" width="116" /></a>

<script type="text/javascript">


$(document).ready(function(){

 // Scroll page to the bottom
 $('a.scrollToBottom').click(function(){

 $('html, body, .content').animate({scrollTop: $(document).height()}, 1500);

 return false;

 });
})
</script>

现在该代码的作用是，当我单击“godown.png”图像时，它会起作用，但会转到页面底部的末尾。无论如何让它去中间？我将如何用#middle 或其他东西定义中间？

Answer 1

为了使其顺利添加e.preventDefault(); 在滚动功能中

$('a.scrollToBottom').click(function(e){
     e.preventDefault();
     $('html, body, .content').animate({scrollTop: $(document).height()}, 1500);
});

Answer 2

要滚动到页面的特定部分，您可以使用 jQuery 函数 offset [ http://api.jquery.com/offset/ ] 来计算元素相对于页面的偏移量。然后您可以滚动到文档中的某个位置。

例子

html:

<a href="#">scroll to c</a>
<div id="a">a</div>
<div id="b">b</div>
<div id="c">c</div>

带有 jQ​​uery 的 js：

$("a").click(function(e){
    var targetOffset= $("#c").offset().top;
    $('html, body').animate({scrollTop: targetOffset}, 1500);
    e.preventDefault();    
});

完整代码：http: //jsfiddle.net/rniestroj/FkCK8/

Answer 3

尝试这个 ：）

$("a").click(function(e){
  e.preventDefault();
  var targetOffset = $(".content").offset().top + 1500;
  $('html, body').animate({scrollTop: targetOffset}, 0);
});