Quand on clique sur l'accordéon jQuery, il faut aller en haut de la page

J'ai une disposition en accordéon dans jQuery avec une section qui est devenue plutôt grande. Je dois pouvoir cliquer sur les différentes sections et ouvrir l'accordéon et la barre de défilement à droite en haut à droite de la page. J'ai essayé le mais ça ne marche pas et casse l'accordéon. Comment puis-je cliquer sur un lien pour que l'accordéon reste en haut de la page?Quand on clique sur l'accordéon jQuery, il faut aller en haut de la 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%">&nbsp;</td> 
     <td width="47%">&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>&nbsp;</td> 
     <td>&nbsp;</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>

Source

2010-12-15 braveowl

Est-ce que vous pouvez publier ceci sur une page? C'est un peu à digérer. –

Je ne suis pas sûr de ce que vous voulez dire, exactement. – braveowl

je suppose que je pourrais supprimer les fonctions JS que j'ai là-bas et supprimer le contenu lui-même. cela serait-il utile? – braveowl

Essayez

object.scrollIntoView(); // moves the viewport

window.scrollTo(0,0); // scrolls the window

difficile à deviner où en fonction de votre poste, mais peut-être

$('[name*="RadioGroup1"]').click(function() { 
    $(this).scrollIntoView();

Ou regardez ici: How do I scroll a row of a table into view (element.scrollintoView) using jQuery?

Source

2010-12-15 14:17:47 mplungjan

placé où? cela serait-il ajouté à la fonction accordéon? ou au ? – braveowl

oh, donc la fonction scrollIntoView() défilera vers le nom de quelque chose, peu importe ce que vous voulez le nommer? – braveowl

désolé d'être nébuleux. J'ai eu besoin de la deuxième seconde pour être cliqué et mettre en évidence. – braveowl

Vous pouvez lier des événements à votre accordéon, que ce soit sur l'objet ou lorsque vous le créez.

changer donc votre $('#accordion').accordion(); à

$('#accordion').accordion({ 
    changestart: function() { 
     window.scrollTo(0, 0); 
    } 
});

L'événement changestart se déclenche chaque fois que les changements d'accordéon (clic ou sur ce que votre événement pour c'est).

Source

2010-12-15 14:18:29

qui ne semble pas aider. il ne défile pas vers le haut et il casse l'accordéon pour les sections en dessous du premier. un aperçu de pourquoi? – braveowl

@braveowl: Quelle version utilisez-vous? Voir la documentation sur UI/Accordion v.1.8 ici: http://docs.jquery.com/UI/Accordion –

Je référence les versions de google en ligne à ajax.googleapis.com – braveowl

Quand on clique sur l'accordéon jQuery, il faut aller en haut de la page

Répondre

Questions connexes