CODEWITHSUNDEEP
jquery
Swee Hong
Swee Hong

Reputation: 539

How jQuery scroll X to a div id?

I has been look into few question and answer, and I try in my coding, but not working for me. Reference: How to scroll to an element inside a div?, below is my current coding, I would like to scroll to Div id = goose when page load.

Thank you.

jQuery.noConflict();
jQuery(document).ready(function() {
    var myElement = document.getElementById('goose');
    var leftPos = myElement.offsetLeft;
    document.getElementById('okk').scrollLeft = leftPos;
});
.container{
    overflow-x: auto; 
    max-height: 60px; 
    position: relative; 
    border: 1px solid red; 
    height:60px;
}
.parent{
    display: flex;
}
.child{
    float:left; 
    background-color:red; 
    padding: 5px 10px; 
    text-align:center; 
    flex:0 0 50px; 
    overflow:hidden; 
    margin-right:10px;
}
#goose{
    position:relative;
    border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container">
  <div class="parent" id="okk">
    <div class="child">0</div>
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
    <div class="child">11</div>
    <div class="child">12</div>
    <div class="child">13</div>
    <div class="child">14</div>
    <div class="child">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child">18</div>
    <div class="child">19</div>
    <div class="child">20</div>
    <div class="child">21</div>
    <div class="child">22</div>
    <div class="child">23</div>
    <div class="child">24</div>
    <div class="child" id="goose">25</div>
    <div class="child">26</div>
    <div class="child">27</div>
    <div class="child">28</div>
    <div class="child">29</div>
    <div class="child">30</div>
    <div style="clear:both"></div>
  </div>
</div>

Upvotes: 0

Views: 96

Answers (1)

Liftoff
Liftoff

Reputation: 25372

You're scrolling the wrong element. The .container is what is scrollable, not the .parent. I've moved your #okk ID to the .container element and it works just fine.

jQuery.noConflict();
jQuery(document).ready(function() {
    var myElement = document.getElementById('goose');
    var leftPos = myElement.offsetLeft;
    document.getElementById('okk').scrollLeft = leftPos;
});
.container{
    overflow-x: auto; 
    max-height: 60px; 
    position: relative; 
    border: 1px solid red; 
    height:60px;
}
.parent{
    display: flex;
}
.child{
    float:left; 
    background-color:red; 
    padding: 5px 10px; 
    text-align:center; 
    flex:0 0 50px; 
    overflow:hidden; 
    margin-right:10px;
}
#goose{
    position:relative;
    border:1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="container" id="okk">
  <div class="parent" >
    <div class="child">0</div>
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
    <div class="child">9</div>
    <div class="child">10</div>
    <div class="child">11</div>
    <div class="child">12</div>
    <div class="child">13</div>
    <div class="child">14</div>
    <div class="child">15</div>
    <div class="child">16</div>
    <div class="child">17</div>
    <div class="child">18</div>
    <div class="child">19</div>
    <div class="child">20</div>
    <div class="child">21</div>
    <div class="child">22</div>
    <div class="child">23</div>
    <div class="child">24</div>
    <div class="child" id="goose">25</div>
    <div class="child">26</div>
    <div class="child">27</div>
    <div class="child">28</div>
    <div class="child">29</div>
    <div class="child">30</div>
    <div style="clear:both"></div>
  </div>
</div>

Upvotes: 1

Related Questions