Set page to scroll to loaded div onclick

Question

This a part of the entire project. The primary requirement is to load the <div> upon link click. I'm able to achieve it using the jquery script. The loads perfectly and other sibling div hided, but it scrolls to the top of the page. My page has many two sections with <div> loading in them. Is there a possibility to modify the jquery to set page scroll the loaded <div> onclick. I tried to use focus() and event.preventdefault(). But I'm not able to get it to work.

Here is the design of the page. 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;
 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; 
    text-decoration: none;
}

li1 a:hover {
    background-color: #111;
 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 -->

http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — apaul, Jul 30 '16 at 17:30

score 0 · Answer 1 · answered Jul 30 '16 at 17:42

0

Add $(this).scrollTop($("#" + divName); to your function.

answered Jul 30 '16 at 17:42

TheValyreanGroup

3,407
2
10
30

To which function should I add this. I tried to add it to the click function and the javascript on the page would not work. it does nothing basically. – Coding Enthusiast Jul 30 '16 at 17:53

score 0 · Answer 2 · answered Jul 30 '16 at 17:45

0

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

answered Jul 30 '16 at 17:45

Naveed

829
1
8
19

Tried this. and the webpage would not respond. – Coding Enthusiast Jul 30 '16 at 17:51
2

Your div is dynamically shown / hidden so you will need to add this snippet right after you show / hide it. i.e. right after the line `$("#"+divname).show("slow").siblings().hide("fast");` – Naveed Jul 30 '16 at 18:24
Tried it and it would not work. The webpage would not respond at all. The links don't seem to do anything after you click on them – Coding Enthusiast Jul 31 '16 at 02:32

Set page to scroll to loaded div onclick

2 Answers2