2

我试图弄清楚如何向下滚动包含一些文本的“球”。

我为 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”时，如果我继续滚动，球就会跟随直到页面结束。如何设置让球只滚动 280 像素然后停在那里？抱歉，如果我不清楚我要解释的内容...我可以设置最大滚动高度吗？所以它只是滚动280px？

4

1 回答 1

1

你可以试试这个。

position从 CSS 中删除。

然后，在您的脚本中，在click.

所以

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

这是一个演示：http: //jsfiddle.net/aHKJk/

于 2013-10-29T13:34:13.237 回答