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>

使用jQuery 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);
});

jQuery顺利滚动到页面的特定部分？

3 个答案: