使显示/隐藏表单自动滚动
Make Show/Hide form auto scroll
如何使下一行或问题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/
用工作代码更新了你的小提琴：
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
});
}
}
$('html,body').animate({scrollTop: questions.eq(i).offset().top}, 'slow');
http://jsfiddle.net/MXYZT/2/
为当前问题添加一个类（比如.active）。然后构建一个scrollToActive函数，并在每次回答事件后运行它。
这里有一个例子：
function scrollToActive() {
$('html,body').animate({scrollTop: $('.active').offset().top},10);
}
在每个应答事件中，您都希望removeClass('active')并将其添加到下一个。
相关文章：
- 向表单添加滚动功能
- 表单中用于特定字段的滚动条
- 引导表单向导 - 防止在提交 ajax 响应的每个页面表单出现错误时滚动到下一步
- 表单验证自动滚动修改脚本
- 如何检查表单提交时鼠标滚动点击完成的点击事件
- AngularJS-表单验证，如何滚动到第一个无效输入
- 如何在可滚动表单上进行验证
- 为什么当我滚动到我的页面顶部并单击附加表单的链接时，它会向下滚动我
- EXT-JS 4.2.1 保留表单 - 面板滚动条的当前位置
- 如何在不使用 angularjs 向下滚动时验证表单
- 如何使用javascript提交表单后返回到原始滚动位置
- 表单验证错误后平滑滚动到页面脚本顶部
- 如何在extjs中隐藏表单中的显示项后保持滚动位置
- 使显示/隐藏表单自动滚动
- Sencha触摸表单面板，不使用鼠标滚动
- 当使用滚动图像提交表单时，我的验证将被忽略
- 单击文本框appcelerator时的可滚动表单视图
- 使用滚动在jquery中提交表单
- 当滚动到底部并更新到输入表单时，如何将值加1
- 如何在多次克隆表单时使用javascript或jquery自动滚动到重点输入字段分区
