JS/jQueryの - 側のナビゲーションバーのセットのスクロールバー特定の位置に

Question

私はこのようになりますサイドナビゲーションバーがあります。

.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 
});