单击jQuery手风琴时，需要转到页面顶部
[英]When jQuery accordion is clicked, needs to go to top of page
问题描述
I have an accordion layout in jQuery with one section that has become rather large. 
我在jQuery中有一个手风琴布局，其中一部分已经变得很大。 I need to be able to click the different sections and have the accordion open and the scroll bar on the right be all the way to the top of the right of the page. 我需要能够单击不同的部分，并打开手风琴，并且右侧的滚动条一直位于页面右侧的顶部。 I tried the but that doesn't work and breaks the accordion. 我尝试了，但是那没有用，使手风琴破裂了。 How can I click a link and have the accordion stay at the top of the page? 如何单击链接并使手风琴停留在页面顶部？
code: 码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="jquery-ui.css" type="text/css"/>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="demo/dialog.css" media="screen" />
<link rel="stylesheet" type="text/css" href="fixed-box/fixed-box/style-accordion.css" media="screen"/>
<script>
$(document).ready(function()
{
$('#other').change(function()
{
$('#otherrace').parent().toggle(this.checked).focus();
});
$("#toggleElement").change(function() {
$('input[name=living]').not(this).attr('disabled', this.checked);
});
$("#toggleInsurance").change(function() {
$('input[name=insurance]').not(this).attr('disabled', this.checked);
});
$("#toggleInsurance").change(function() {
$('input[name=insurance]').not(this).attr('disabled', this.checked);
});
$("#accordion").accordion();
$('[name*="race"]').click(function() { $('#otherrace').css('visibility', $('#other').attr('checked') ? 'visible':'hidden'); });});$(document).ready(function() {
$('[name*="RadioGroup1"]').click(function() {
$('#RadioGroup1_11').css('visibility', $('#RadioGroup1_10').attr('checked') ? 'visible':'hidden');
});
});
</script>
</head>
<body style="font-size:75%" >
<div id="centerColumn">
<div id="accordion">
<h6><i can't post one than one link>Demographcis</a></h6>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<th width="18%" scope="row">Last Name</th>
<td width="31%"><form name="form1" method="post" action="">
<input type="text" name="textfield" id="textfield" maxlength="20">
</form></td>
<td width="4%"> </td>
<td width="47%"> </td>
</tr>
<tr>
<th scope="row">Middle Initial</th>
<td><form name="form2" method="post" action="">
<input type="text" size="3" maxlength="1" name="textfield2" id="textfield2">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">First Name</th>
<td><form name="form3" method="post" action="">
<input type="text" name="textfield4" id="textfield4" maxlength="20">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Address</th>
<td><form name="form4" method="post" action="">
<input type="text" size="35" name="textfield5" id="textfield5" maxlength="35">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Rural Route#</th>
<td><form name="form5" method="post" action="">
<input type="text" name="textfield6" id="textfield6" maxlength="8">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">City</th>
<td><form name="form6" method="post" action="">
<input type="text" name="textfield7" id="textfield7" maxlength="20">
</form></td>
<td>State</td>
<td><form name="form7" method="post" action="">
<input type="text" size="2" maxlength="3" name="textfield8" id="textfield8">
ZIP
<input type="text" maxlength="5" size="6" name="textfield9" id="textfield9">
</form></td>
</tr>
<tr>
<th scope="row">DOB</th>
<td><form name="form8" method="post" action="">
<input type="text" size="11" maxlength="10" name="textfield10" id="textfield10">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Phone</th>
<td><form name="form9" method="post" action="" >
<input type="text" size="12" maxlength="13" name="textfield11" id="textfield11">
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Gender</th>
<td><form name="form10" method="post" action="">
<p>
<input type="radio" name="Gender" value="female" id="Gender_0">
Female
<br>
<input type="radio" name="Gender" value="male" id="Gender_1">
Male
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Race/Ethnicity</th>
<td>
<p>
<input type="checkbox" name="race_" value="asian" id="race_0">
Asian
<br>
<input type="checkbox" name="race_" value="white" id="race_1">
White
<br>
<input type="checkbox" name="race_" value="black" id="race_2">
Black
<br>
<input type="checkbox" name="race_" value="latino" id="race_3">
Latino
<br>
<input type="checkbox" name="race_" value="island" id="race_4">
Pacific Islander
<br>
<input type="checkbox" name="race_" id="other"value="other" />Other, specify<br />
<div style="display:none" id="race"><input type="text" name="fname" size="25" maxlength="25" id="otherrace" /></div>
<br>
</p>
<input type="text" style="display:none;" name="race_" value="other1" id="otherrace">
</td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Living Arragenments</th>
<td><form name="form11" method="post" action="">
<p>With whom do you live? Choose all that apply<br/>
<input type="checkbox" name="living" value="alone" id="living">
Live alone
<br>
<input type="checkbox" name="living" value="husband" id="living">
Husband
<br>
<input type="checkbox" name="living" value="partner" id="living">
Partner
<br>
<input type="checkbox" name="living" value="children" id="living">
Children
<br>
<input type="checkbox" name="living" value="parents" id="living">
Parents
<br>
<input type="checkbox" name="living" value="other_relatives" id="living">
Other relatives
<br>
<input type="checkbox" name="living" value="religion" id="living">
Religious order
<br>
<input type="checkbox" name="living" value="no_answer"
id="toggleElement">
Choose not to answer
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Education</th>
<td>Highest level of education:<br/>
<form name="form12" method="post" action="">
<p>
<label>
<input type="radio" name="RadioGroup1" value="less_high" id="RadioGroup1_0">
Less than high school</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="some_high" id="RadioGroup1_1">
Some high school</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="high" id="RadioGroup1_2">
High school diploma</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="ged" id="RadioGroup1_3">
GED</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="some_college" id="RadioGroup1_4">
Some college</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="votech" id="RadioGroup1_5">
Vocational or technical</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="associates" id="RadioGroup1_6">
Associates degree</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="bachelor" id="RadioGroup1_7">
Bachelor's degree</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="postgrad" id="RadioGroup1_8">
Post graduate training</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="no_answer_school" id="RadioGroup1_9">
Choose not to answer</label>
<br>
<label>
<input type="radio" name="RadioGroup1" value="other_ed"
id="RadioGroup1_10">
Other<br/></label>
<div id="RadioGroup1_9"> <input style="visibility:hidden" type="text" name="fname" size="25" maxlength="25" id="RadioGroup1_11" /></div>
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Insurance</th>
<td>Choose your insurance-check all that apply<br>
<form name="form13" method="post" action="">
<p>
<label>
<input type="checkbox" name="insurance" value="privateins" id="insurance_0">
Private/HMO/PPO</label>
<br>
<label>
<input type="checkbox" name="insurance" value="medicaid" id="insurance_1">
Medicaid</label>
<br>
<label>
<input type="checkbox" name="insurance" value="medicare" id="insurance_2">
Medicare</label>
<br>
<label>
<input type="checkbox" name="insurance" value="va" id="insurance_3">
VA/Tricare</label>
<br>
<label>
<input type="checkbox" name="insurance" value="noins" id="insurance_4">
No insurance</label>
<br>
<label>
<input type="checkbox" name="insurance" value="noknowins" id="toggleInsurance">
</label>
<label>Choose not to answer</label>
<br>
<label>
<input type="checkbox" name="insurance" value="no_ans_ins" id="insurance_6">
</label>
Do not know<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
<tr>
<th scope="row">Income</th>
<td>Gross income of your household<br>
<form name="form14" method="post" action="">
<p>
<label>
<input type="radio" name="income" value="tenk" id="income_0">
Less than $10,000</label>
<br>
<label>
<input type="radio" name="income" value="fifteenk" id="income_1">
Less than $15,000</label>
<br>
<label>
<input type="radio" name="income" value="twentyk" id="income_2">
Less than $20,000</label>
<br>
<label>
<input type="radio" name="income" value="twentyfivek" id="income_3">
Less than $25,000</label>
<br>
<label>
<input type="radio" name="income" value="thirtyfivek" id="income_4">
Less than $35,000</label>
<br>
<label>
<input type="radio" name="income" value="fiftyk" id="income_5">
Less than $50,000</label>
<br>
<label>
<input type="radio" name="income" value="seventyfivek" id="income_6">
Less than $75,000</label>
<br>
<label>
<input type="radio" name="income" value="dontknow" id="income_7">
I don't know</label>
<br>
<label>
<input type="radio" name="income" value="no_answer_income" id="income_8">
Choose not to answer</label>
<br>
</p>
</form></td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<h3><i can't post one than one link>Injury Information</a></h3>
<div>
<p>
blahlbalh
</p>
</div>
</div>
</div>
</body>
</html>
2 个解决方案
解决方案1
0 2010-12-15 14:17:47
Try 尝试
object.scrollIntoView(); // moves the viewport
or 要么
window.scrollTo(0,0); // scrolls the window
hard to guess where based on your post, but perhaps 很难根据您的帖子猜测出哪里，但是也许
$('[name*="RadioGroup1"]').click(function() {
$(this).scrollIntoView();
Or have a look here: How do I scroll a row of a table into view (element.scrollintoView) using jQuery? 或在这里看看： 如何使用jQuery将表的一行滚动到视图（element.scrollintoView）中？
解决方案2
0 2010-12-15 14:18:29
You can bind events to your accordion, either on the object or when you create it. 您可以在对象上或创建对象时将事件绑定到您的手风琴。
So change your $('#accordion').accordion(); 因此，更改您的$('#accordion').accordion(); to 至
$('#accordion').accordion({
changestart: function() {
window.scrollTo(0, 0);
}
});
The changestart event will fire every time the accordion changes (on click or what your event for it is). 每当手风琴发生更改时， changestart事件就会触发（单击或您的事件是什么）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
单击手风琴时如何滚动到页面顶部？ - How to scroll to top of page when accordion is clicked?
jQuery手风琴-使Clicked元素滚动到页面顶部 - Jquery Accordion - Make Clicked element scroll to top of page
单击时手风琴滚动到顶部？ - Accordion scroll to top when clicked?
JQuery手风琴在点击时不断移动到页面顶部 - JQuery accordion keeps moving to top of the page on click
如何使jQuery Accordion在页面顶部打开？ - How to make jQuery Accordion open at the top of the page?
单击链接时显示jQuery手风琴？ - Display jQuery Accordion when link is clicked?
单击具有手风琴中的元素的id的链接时，打开JQuery手风琴 - Open JQuery accordion when link with an id of element within the accordion is clicked
Bootstrap手风琴-页面首先跳至底部，然后跳至第一期 - Bootstrap Accordion - Page jumps to bottom first then go to top issue
单击链接时在导航中使用jQuery - 转到目标页面，然后滚动到页面的特定部分 - Using jQuery in navigation when link is clicked - go to target page, then scroll to a specific section of page
Accordion JS 问题 - 单击时它会打开到手风琴的底部，而不是停留在我单击的顶部 - Accordion JS Problem - when click it opens to the bottom of the accordion instead of staying at top where i clicked
相关标签