jQuery向下滾動球

Question

我想弄清楚如何向下滾動一個包含一些文本的「球」。

我寫了JavaScript的代碼來獲取滾動頁面滾動的「球」。

$(".scrollDown").click(function() { 
    $("html body").animate({ scrollTop: 280}, 1300); 
}); 

而CSS：

.ball-about { 
position: fixed; 
top: 280px; 
left: 30px; 
display: block;  
background: #809dbf; 
border-radius: 50%; 
height: 150px; 
width: 150px; 
margin: 0; 

} 

標記：

<a href="#" class="btn-color-2 scrollDown">About</a> 
<div class="ball-about pull-left"><h2>About</h2> 

的問題是，這個作品，但，有一個但是......如果球的位置「固定「，隨着頁面向下滾動，隨之而來。但是我想要的是，當我在JavaScript中向下滾動「280px」時，如果我繼續滾動，則直到頁面結束爲止。我怎樣才能設置這樣的球只滾動280px，然後在那裏停下來？對不起，如果我不清楚我想解釋的是什麼......我可以設置最大滾動高度？所以它只是滾動280px？

---

Answer 1

你可以試試這個。

從CSS中刪除position。

然後，在您的腳本中，在click中添加樣式。

所以

$(".scrollDown").click(function() { 
    $("html body").animate({ scrollTop: 280}, 1300); 
    var styles = { 
     position : "absolute", 
     top : "280px" 
    }; 
    $('.ball-about').css(styles); 
}); 

這裏有一個演示：http://jsfiddle.net/aHKJk/