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然后停在那里？对不起，如果我不清楚我要解释的内容......我可以设置MAX滚动高度吗？所以它只滚动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/

jQuery向下滚动球

1 个答案: