Seite zum Scrollen zum geladenen div onclick setzen

Dies ist ein Teil des gesamten Projekts. Die primäre Anforderung ist das Laden der <div> bei Link-Klick. Ich kann das mit dem jquery-Skript erreichen. Die Lasten perfekt und andere Geschwister div versteckt, aber es scrollt an den Anfang der Seite. Meine Seite hat viele zwei Abschnitte mit <div> laden in ihnen. Gibt es eine Möglichkeit, die jQuery zu ändern, um die Seite zu scrollen, die geladene <div> onclick. Ich habe versucht, focus() und event.preventdefault() zu verwenden. Aber ich kann es nicht zur Arbeit bringen.Seite zum Scrollen zum geladenen div onclick setzen

Hier ist das Design der Seite. WEBPAGE DESIGN.

$(document).ready(function(){ 
 
$('a').click(function() { 
 
var divname= this.name; 
 
$("#"+divname).show("slow").siblings().hide("fast"); 
 
}); 
 
});

#header { 
 
    
 
    background-color:#A4E2F4; 
 
    color:Black; 
 
    text-align:center; 
 
    padding:20px; 
 
} 
 
input, textarea{ 
 
    background-color:#B7F9EB; 
 
    color: Black; 
 
} 
 
textarea { 
 
    border-radius: 6px; 
 
    border: 1px solid Black; 
 
\t outline: none; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
    display: inline-block; 
 
    
 
     
 
} 
 

 
ul2 { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #9B9A9A; 
 
    display: inline-block; 
 
    
 
    
 
} 
 

 
li1 { 
 
    float: left; 
 
border-right: 1px solid #bbb; 
 
} 
 

 
li1 a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 12px 16px; \t 
 
    text-decoration: none; 
 
} 
 

 
li1 a:hover { 
 
    background-color: #111; 
 
\t color: white; 
 
} 
 

 

 
#section { 
 
    width:auto; 
 
    height:auto; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size:18px; 
 
    float:center; 
 
    padding:30px; 
 
} 
 

 

 
#section2 { 
 
    width:auto; 
 
    height:auto; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size:18px; 
 
    float:center; 
 
    padding:30px; 
 
    background-color:#eeeeee; 
 
    } 
 

 

 

 

 
/* Vertical nav bar */ 
 
vl { 
 
    list-style-type: none; 
 
    line-height:30px; 
 
    
 
    float: left; 
 
    height:auto; 
 
    width: 200px; 
 
    background-color: #EEEEEE; 
 
    padding: 10px; 
 
} 
 

 
li2 a { 
 
    display: block; 
 
    color: #000; 
 
    padding: 8px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li2 a:hover { 
 
    background-color: #555; 
 
    color: white; 
 
} 
 

 
li3 a { 
 
    display: block; 
 
    color: #000; 
 
    padding: auto; 
 
    width: auto; 
 
    text-decoration: none; 
 
} 
 

 
li3 a:hover { 
 
    color: blue; 
 
} 
 

 

 
/* End of nav bar */ 
 

 

 
#footer { 
 
    Width:auto;  
 
    background-color:#F2F2F2; 
 
    color:Black; 
 
    clear:both; 
 
    text-align:center; 
 
    padding:4px; 
 
}

<TABLE> 
 
<center> 
 
<ul> 
 
<li1><a href="#" name="div100" >MAIN1</a></li1> 
 
<li1><a href="#" name="div200" >MAIN2</a></li1> 
 

 
</UL> 
 

 

 
<UL2> 
 

 
<div id="div100" style="display:none" align="left"> 
 

 
<li1><a href="#" name="div1" >SUBMAIN1</a></li1> 
 
<li1><a href="#" name="div3" >SUBMAIN2</a></li1> 
 
<li1><a href="#" name="div5" >SUBMAIN3</a></li1> 
 

 
</div> 
 

 

 
<div id="div200" style="display:none" align="left"> 
 

 

 
<li1><a href="#" name="div9" >SUBMAIN4</a></li1> 
 
<li1><a href="#" name="div10" >SUBMAIN5</a></li1> 
 
<li1><a href="#" name="div11" >SUBMAIN6</a></li1> 
 

 
</UL2> 
 
</center> 
 
<center> 
 

 
<!-- Second Link Container --> 
 
<div id="div1" style="display:none" align="left"> 
 
<div id="section"> 
 
</div> 
 
<div id="section2"> 
 
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B> 
 
<li3><a href="#" name="l1" >1. link1</a></li3> 
 
<li3><a href="#" name="l2" >2. link2</a></li3> 
 
<li3><a href="#" name="l3" >3. Link3</a></li3> 
 
<li3><a href="#" name="l4" >4. link4</a></li3> 
 
</div> 
 
</div> 
 

 

 
<div id="div2" style="display:none" align="left"> 
 
<div id="section"> 
 
</div> 
 
<div id="section2"> 
 
<Center><B>SOME LINK LIST<h6><i>(Click on links below)</i></h6> </Center></B> 
 
<li3><a href="#" name="m1" >1. link1</a></li3> 
 
<li3><a href="#" name="m2" >2. link2</a></li3> 
 
<li3><a href="#" name="m3" >3. Link3</a></li3> 
 
<li3><a href="#" name="m4" >4. link4</a></li3> 
 
</div> 
 
</div> 
 

 
</center> 
 

 
<!-- Bootstrap Modal Div --> 
 
<!-- modals goes here--> 
 
<!-- Main Container --> 
 

 
<center> 
 
<div id="section"> 
 

 

 
<div id = "l1" style="display:none" align="left"> 
 

 
<form> 
 
    <h3>Select your favorite sports:</h3> 
 
    <label> 
 
    <input type="checkbox" value="football" name="sport"> Football</label> 
 
    <label> 
 
    <input type="checkbox" value="baseball" name="sport"> Baseball</label> 
 
    <label> 
 
    <input type="checkbox" value="cricket" name="sport"> Cricket</label> 
 
    <label> 
 
    <input type="checkbox" value="boxing" name="sport"> Boxing</label> 
 
    <label> 
 
    <input type="checkbox" value="racing" name="sport"> Racing</label> 
 
    <label> 
 
    <input type="checkbox" value="swimming" name="sport"> Swimming</label> 
 
    <br> 
 
    <button type="button">Get Values</button> 
 
</form> 
 
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button> 
 
    <button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button> 
 
</div><!-- closing blank div --> 
 

 
<div id = "l2" style="display:none" align="left"> 
 

 
<form> 
 
    <h3>Select your favorite sports:</h3> 
 
    <label> 
 
    <input type="checkbox" value="football" name="sport"> Football</label> 
 
    <label> 
 
    <input type="checkbox" value="baseball" name="sport"> Baseball</label> 
 
    <label> 
 
    <input type="checkbox" value="cricket" name="sport"> Cricket</label> 
 
    <label> 
 
    <input type="checkbox" value="boxing" name="sport"> Boxing</label> 
 
    <label> 
 
    <input type="checkbox" value="racing" name="sport"> Racing</label> 
 
    <label> 
 
    <input type="checkbox" value="swimming" name="sport"> Swimming</label> 
 
    <br> 
 
    <button type="button">Get Values</button> 
 
</form> 
 
<button id = "button1" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" >I play these games</button> 
 
    <button id = "button2" type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">I dont play these games</button> 
 
</div><!-- closing blank div --> 
 
<!--- Code goes on -->

Quelle

2016-07-30 Coding Enthusiast

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element – apaul

$(this).scrollTop($("#" + divName); auf Ihre Funktion hinzufügen.

Quelle

2016-07-30 17:42:43 TheValyreanGroup

Zu welcher Funktion sollte ich das hinzufügen. Ich habe versucht, es der Klickfunktion hinzuzufügen und das Javascript auf der Seite würde nicht funktionieren. es macht grundsätzlich nichts. –

 var elem = $("#"+divname); 
     $('html, body').animate({ 
      scrollTop: elem.offset().top; 
     }, 800);

Quelle

2016-07-30 17:45:30 Naveed

Versucht dies. und die Webseite würde nicht antworten. –

Ihr div wird dynamisch angezeigt/ausgeblendet, daher müssen Sie dieses Snippet direkt nach dem Anzeigen/Verbergen hinzufügen. direkt hinter der Zeile '$ (#) + divname) .show (" langsam "). siblings(). hide (" fast ");' – Naveed

Versuchte es und es würde nicht funktionieren. Die Webseite würde überhaupt nicht antworten. Die Links scheinen nichts zu tun, nachdem Sie darauf geklickt haben –

Seite zum Scrollen zum geladenen div onclick setzen

Antwort

Verwandte Themen