javascript - 使显示/隐藏表单自动滚动

Question

我如何做到这一点，以便当下一行或问题 2、3、4 等时，自动滚动到该行或问题，这样用户就不必手动滚动来查看下一个问题，因为它可以变成麻烦，它减少了回答问题的时间。我试图将自动滚动添加到 div 但图像消失了。

<!DOCTYPE html>
<html>
<head>

<style type='text/css'>
    .radio div[type='radio'] {
        background: url($image) no-repeat #eee;
        height:55px;
        width:60px;
        border:1px solid #DDD;
        border-radius:10px;
        padding:1px;
        float:left;
        margin-right:10px;
        cursor:pointer
    }
    .radio div.active{
        box-shadow:0 0 2px 1px #00f inset;
    }
    .tablebuttons img {
        width: 60px;
        height: 55px;
        border: 0px solid #666;
        background: #fff;
        display:block;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
    }
    .question {
        margin: 20px 0 20px 0;
        display: none;
        clear: both;
    }
    #linkDiv {
        margin: 0;
    }
    .clear {
        clear: both;
    }
</style>

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">

$(window).load(function(){
$('.radio div').on('click', function() {
var $this   = $(this),
$parent = $this.parent(),
value   = $this.attr('value');

$parent.children().removeClass('active');
$this.addClass('active');
$parent.attr('value', value);

//get all selected radios
var q1=$('div[name="q1"].active');
var q2=$('div[name="q2"].active');
var q3=$('div[name="q3"].active');
var q4=$('div[name="q4"].active');

//make sure the user has selected all 3
if (q1.length !== 0 && q2.length !== 0 && q3.length !== 0 && q4.length !== 0)
{
    //now we know we have 3 radios, so get their values
    q1=q1.attr('value');
    q2=q2.attr('value');
    q3=q3.attr('value');
    q4=q4.attr('value');

    // activate button
    $('#next_button').removeAttr('disabled');

    //now check the values to display a different link for the desired  configuration
    if (q1=="AT&T" && q2=="8GB" && q3=="Black" && q4=="Black")
    {
        $('#next_button').val('att 8gb black').click(function() {  
window.location.href='http://google.com/' } );
    }
    else if (q1=="AT&T" && q2=="16GB" && q3=="White" && q4=="Black")
    {
        document.getElementById("linkDiv").innerHTML="<input type=button value=Next   
onclick=\"window.location.href='http://bing.com/';\">another option</input>";
    }
    else if (q1=="AT&T" && q2=="16GB" && q3=="Black" && q4=="Black")
    {
        document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://gmail.com/';\">oops</input>";
    }
    else if (q1=="AT&T" && q2=="8GB" && q3=="White" && q4=="Black")
    {
        document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://hotmail.com/';\">can't</input>";
    }

    else if (q1=="Unlocked" && q2=="8GB" && q3=="White" && q4=="Black")
    {
        document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://wepriceit.webs.com/';\">red</input>";
    }
    else if (q1=="Unlocked" && q2=="8GB" && q3=="Black" && q4=="Black")
    {
        document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://webs.com/';\">orange</input>";
    }
    else if (q1=="Unlocked" && q2=="16GB" && q3=="White" && q4=="Black")
    {
        document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://gazelle.com/';\">green</input>";
    }
    else if (q1=="Unlocked" && q2=="16GB" && q3=="Black" && q4=="Black")
    {
        document.getElementById("linkDiv").innerHTML="<input type=button value=Next 
onclick=\"window.location.href='http://glyde.com/';\">blue</input>";
    }
}

}); 

var questions = $(".question");
var showQuestions = function(index) {
console.log("showQuestions index=" + index);
for(var i=0; i<questions.length; i++) {
    if(i < index) {
        questions.eq(i).css("display", "block");
    } else {
        questions.eq(i).css("display", "none");
    }
}    
}

for(var i=0; i<questions.length; i++) {
(function(index) {
    questions.eq(index).find("div[type='radio']").on("click", function() {
        showQuestions(index+2);
    })
})(i);
}
showQuestions(1);

});//]]>  

</script>

</head>
<body class="questionnaire">

<form name="quiz" id='quiz'>

<div class="question">
    <h4>Choose your series.</h4>
    <div class="radio" id="form">
        <div class="tablebuttons" type="radio" name="q4" value="iPhone-3GS">
            <img width="50px" height="50px"  
src="http://wepriceit.webs.com/Images/iPhone-3GS.png" />
        </div>
        <div class="tablebuttons" type="radio" name="q4" value="iPhone-4">
            <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/iPhone-4.png" />
        </div>
        <div class="tablebuttons" type="radio" name="q4" value="iPhone-4S">
            <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/iPhone-4S.png" />
        </div>
        <div class="tablebuttons" type="radio" name="q4" value="iPhone-5">
            <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/iPhone-5.png" />
        </div>
        <div class="tablebuttons" type="radio" name="q4" value="iPhone-5">
            <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/iPhone-5.png" />
        </div>
        <div class="tablebuttons" type="radio" name="q4" value="iPhone-5">
            <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/iPhone-5.png" />
        </div>
    </div>
</div>

<br class="clear" />
<div class="question">
    <h4>What carrier do you have?</h4>
    <div class="radio" id="form">
        <div class="tablebuttons" type="radio" name="q1" value="AT&T">
            <img width="50px" height="50px" src="http://wepriceit.webs.com/Images/ATT- 
logo.png" />
        </div>   
        <div class="tablebuttons" type="radio" name="q1" value="Unlocked">
            <img width="50px" height="50px"   
src="http://wepriceit.webs.com/Images/Factory-Unlocked.png" />
        </div>
    </div>
</div>

<br class="clear" />
<div class="question">
    <h4>What is your phones capicity?</h4>
    <div class="radio" id="form">
        <div class="tablebuttons" type="radio" name="q2" value="8GB">
            <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/8GB.png" />
        </div>
        <div class="tablebuttons" type="radio" name="q2" value="16GB">
            <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/16GB.png" />
        </div>
    </div>
</div>

<br class="clear" />
<div class="question">
    <h4>What color is your phone?</h4>
        <div class="radio" id="form">
            <div class="tablebuttons" type="radio" name="q3" value="iPhone-3GS">
                <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/iPhone-3GS.png" />
            </div>
            <div class="tablebuttons" type="radio" name="q3" value="iPhone-4">
                <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/iPhone-4.png" />
            </div>
            <div class="tablebuttons" type="radio" name="q3" value="iPhone-4S">
                <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/iPhone-4S.png" />
            </div>
            <div class="tablebuttons" type="radio" name="q3" value="iPhone-5">
                <img width="50px" height="50px" 
src="http://wepriceit.webs.com/Images/iPhone-5.png" />
            </div>
        </div>
</div>

<br class="clear" />
<div id="linkDiv">
    <input id="next_button" type="button" disabled="disabled" value="Next" />
</div>

</form>

</body>
</html>

http://jsfiddle.net/MXYZT/

score 3 · Accepted Answer

 $('html,body').animate({scrollTop: questions.eq(i).offset().top}, 'slow');

http://jsfiddle.net/MXYZT/2/

score 3 · Accepted Answer

用工作代码更新了你的小提琴：

http://jsfiddle.net/nwxLM/

$("html,body").animate({scrollTop :questions.eq(i).offset().top})

这是完整的功能：

var showQuestions = function (index) {
    for (var i = 0; i < questions.length; i++) {
        if (i < index) {
            questions.eq(i).css("display", "block");

        } else {
            questions.eq(i).css("display", "none");
        }
    }

    if (index > 1) {
        // only scroll to the questions after the first one is clicked
        $('html, body').animate({
            scrollTop : $(questions.eq(index - 1)).offset().top
        });
    }
}

score 2 · Accepted Answer

为当前问题添加一个类（比如说.active）。然后构建一个 scrollToActive 函数并在每个 answer 事件之后运行它。

这是一个例子：

function scrollToActive() {
    $('html,body').animate({scrollTop: $('.active').offset().top},10);
}

在每个答案事件中，您都需要removeClass('active')将其添加到下一个事件中。

javascript - 使显示/隐藏表单自动滚动

3 回答 3

Related

Reference