0

What I'm trying is to get the link to take me to the next step with a scroll animation without moving the whole body but just my "box" div.

Here is my code:

<!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;}
</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
    </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");  
        $('html, body').animate({  
            scrollTop:$(the_id).offset().top  
        }, 'slow');  
        return false;  
    });  

});
</script>
</html>
4

1 回答 1

1

改变

$('html, body').animate({

至

$('.box').animate({
于 2013-06-12T15:02:46.920 回答