Question

我得到一个指向'第2步'的scrool动画，但动画一直到'第3步'。虽然我对第3步的链接似乎使用相同的功能。我无法弄清楚为什么它不会停在正确的div上，谢谢你的帮助！

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.out{background:gray;height:300px;}
.box{height:300px;overflow:auto;}
.question1{background:red;height:300px;}
.question2{background:green;height:300px;}
.question3{background:blue;height:300px;}
.question4{background:yellow;height:300px;}
</style>
</head>

<body>
<div class="out">
    here
</div>
<div class="box">
    <div class="question1" id="step1"> 
        step 1<br>
        <a href="#step2">Step 2</a>
    </div>
    <div class="question2" id="step2">
        step 2<br>
        <a href="#step3">step 3</a>
    </div>
    <div class="question3" id="step3">
        step 3
    </div>
    <div class="question4" id="step4">
        step 4
    </div>
</div>
<div class="out">
    here
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function(){

    $('a[href^="#"]').click(function(){  
        var the_id = $(this).attr("href");  
        $('.box').animate({  
            scrollTop:$(the_id).offset().top  
        }, 'slow');  
        return false;  
    });  

});
</script>
</html>

Answer 1

在$（the_id）.position（）之后sems成为缺少的分号的原因.top;我把你的代码放到了jsfiddle中，它在ie＆amp; firefox现在：http://jsfiddle.net/HZTDE/1/

scrollTop:$(the_id).offset().top;

JavaScript有一种机制，试图通过自动插入分号来纠正错误的程序。不要依赖于此。它可以掩盖更严重的错误。它有时会在不受欢迎的地方插入分号。考虑分号插入对return语句的影响。如果return语句返回一个值，则该值表达式必须与return：
在同一行开始

Answer 2

您正在错误地放置div和锚点！

此外，根据您对html的定位，您可以尝试使用$(the_id).position().top + 'px'

.position（）获取与父级边界相关的偏移量，而offset（）使用文档的边界。

滚动jquery动画缺少div

2 个答案: