JS/jQuery를 특정 위치

Question

에 측면 탐색 모음의 설정 스크롤 바는 I는 다음과 같습니다 측면 탐색 모음이 있습니다

.scroll-box { 
 
    overflow: hidden; 
 
    width: 128px; 
 
} 
 
.filler { 
 
    height: 256px; 
 
    overflow-y: auto; 
 
} 
 
.selector { 
 
    background-color: #369; 
 
    padding: 8px 4px; 
 
    text-align: center; 
 
    flex-grow: 1; 
 
    display: inline-block; 
 
    cursor: pointer; 
 
    box-sizing: border-box; 
 
    transition: .1s !important; 
 
} 
 
.bar { 
 
    height: 8px; 
 
    width: 100%; 
 
    background-color: #808080; 
 
} 
 
.label { 
 
    padding: 4px 8px; 
 
    background-color: #707070; 
 
} 
 
.active { 
 
    background-color: lightgrey; 
 
    color: #369; 
 
}

<div class="scroll-box"> 
 
    <div class="label">Dates</div> 
 
    <div class="filler"> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector active" id="today">15-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    <div class="selector">4-Aug-16</div> 
 
    </div> 
 
    <div class="bar"></div> 
 
</div>

나는 그래서 그것을 얻을 할을 때 페이지가로드되면 측면 탐색 바의 뷰 중심이 자동으로 today id 요소로 중앙에 배치됩니다. 나는 myUrl#today을 넣으려고했지만 전체 페이지 스크롤을 변경합니다. 나는 원하지 않습니다. I

측면 탐색 막대의 스크롤을 사용하여 #today 비트의 위치와 중심 만 변경하면됩니다. 누구든지이 작업을 수행 할 수있는 방법을 알고 있습니까?

jQuery와 JS도 기꺼이 사용합니다.

감사합니다.

Answer 1

나는 레이블이 #today 위에 포함하기 때문에

$(document).ready(function(){ 
    // when document is ready 
    // first check if #today is defined in HTML 
    // the $('') is the jQuery selector of to select an element 
    // $('#today') means select an element with the ID "today" 
    // the .length attribute is default javascript attribute to check 
    //  how many of elements selected has existed 
    if($('#today').length > 0){ 
    // the offset() function is a jQuery function that is used for check the 
    // relative distance from the border of current element to its parent 
    var distance_to_top = $('#today').offset().top; 
    var top_label_height = $('.label').height(); 
    var distance_to_scroll = distance_to_top - top_label_height - 8; 
    // 8 px is body margin on jsfiddle 
    // scrollTop() function is another jQuery function to scroll an  
    //  overflow element 
    $('.filler').scrollTop(distance_to_scroll); 
    } 
}); 

는 다음의 부모를 현재 요소의 상대적 뺀 라벨 높이의 오프셋을 찾을 같은 당신이 jQuery 코드를 사용할 수 있다고 생각합니다. 스크롤이 데모는 어쩌면이 할 수있는 here

Answer 2

에서 찾을 수 있습니다

맨. (나는 그것을 지금 시험 할 수 없다 ...).

기본적으로 "오늘"이라는 ID가없는 div의 모든 요소를 ​​가져오고 그 요소의 높이를 추가합니다. 우리가 마침내 "오늘"에 도달했을 때, 우리는 과거에 추가 된 모든 요소의 높이에 스크롤바를 설정하고 루프 밖으로 나갑니다.

$(document).ready(function(){ 
    var height = 0; 
    $(".filler *").each(function() { 
     if($(this).is("#today")) 
     { 
      return false; //to get out of the .each 
     } 
     else 
     { 
      height += $(this).height(); 
     } 
    }) 
    $("div.demo").scrollTop(height); //set the scrollbar 
});