0

我有一个指向“第 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>
4

2 回答 2

2

原因似乎是 $(the_id).position().top 后面缺少分号；我把你的代码放到 jsfiddle 中，现在在 ie 和 firefox 中对我来说效果很好：http: //jsfiddle.net/HZTDE/1/

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

它可能与自动分号插入有关 - 引自“JavaScript：Douglas Crockford 的优秀部分。版权所有 2008 Yahoo! Inc.，978-0-596-51774-8。” ：

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

于 2013-06-13T08:09:28.927 回答
0

您错误地放置了 div 和锚点！

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

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

于 2013-06-13T07:58:09.153 回答