タブを折りたたむ - 開かれたタブにジャンプ

Question

私はアコーディオンタブを持っています。このアコーディオンは最大1つのオープンタブに設定されています。したがって、1つのタブを開いてから別のタブを開くと、しかし、私は問題がある場合：最初のタブが長いコンテンツを持っていると、ユーザーが別のタブを開いて、最初のタブを非表示にし、ページのスクロールが開かれたタブよりもはるかに低くなると、私は開いているタブにいくつかのジャンプを追加したい。

開発における私のウェブサイト：http://styro.fm4.pl/

$(document).ready(function() { 
 
    $("label").click(function() { 
 
    $('html, body').delay(1000).animate({ 
 
     scrollTop: $(this).offset().top 
 
    }, 500); 
 
    }); 
 
});

.tab { 
 
    position: relative; 
 
    margin-bottom: 6px; 
 
    width: 100%; 
 
    color: #fff; 
 
    overflow: hidden; 
 
    border: 1px solid #000; 
 
} 
 

 
input { 
 
    position: absolute; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
label { 
 
    position: relative; 
 
    display: block; 
 
    padding: 0 0 0 4em; 
 
    font-weight: 300; 
 
    font-size: 20px; 
 
    line-height: 2.5; 
 
    cursor: pointer; 
 
    color: #000; 
 
} 
 

 
.tab-content { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    -webkit-transition: max-height .35s; 
 
    -o-transition: max-height .35s; 
 
    transition: max-height .35s; 
 
    padding: 0px 20px 00px 20px; 
 
} 
 

 
input:checked~.tab-content { 
 
    max-height: 9000px; 
 
} 
 

 
label::after { 
 
    position: absolute; 
 
    left: 23px; 
 
    top: 3px; 
 
    display: block; 
 
    width: 31px; 
 
    height: 45px; 
 
    text-align: center; 
 
    -webkit-transition: all .35s; 
 
    -o-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
input[type=radio]+label::after { 
 
    content: url(../images/up.png); 
 
} 
 

 
input[type=radio]:checked+label::after { 
 
    transform: rotateX(180deg); 
 
} 
 

 
input[type=radio]:checked+label { 
 
    color: #e79f39; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="tab"> 
 
    <input id="tab-1" type="radio" name="tabs2"> 
 
    <label for="tab-1">Tab 1</label> 
 
    <div class="tab-content"> 
 
    Content<div style="height:2000px;">spaace</div>space 
 
    </div> 
 
</div> 
 
<div class="tab"> 
 
    <input id="tab-2" type="radio" name="tabs2"> 
 
    <label for="tab-2">Tab 2</label> 
 
    <div class="tab-content"> 
 
    Content 
 
    </div> 
 
</div> 
 
<div style="height:2000px;">blank space</div>blank space

しかし、このjQueryのコードの問題は、この作品、ということですが、それは最初のタブが隠れていることを無視するので、新しい開いたタブ別の場所にあるので、ユーザーはタブよりもはるかに低い場所にジャンプします。

Answer 1

あなたはちょうどあなたのコード

$(document).ready(function() { 
 
    $("label").click(function() { 
 
    $('html, body').delay(1000).animate({ 
 
     scrollTop: $(this).offset().top 
 
    }, 500); 
 
    }); 
 
});

.tab { 
 
    position: relative; 
 
    margin-bottom: 6px; 
 
    width: 100%; 
 
    color: #fff; 
 
    overflow: hidden; 
 
    border: 1px solid #000; 
 
} 
 

 
input { 
 
    position: absolute; 
 
    opacity: 0; 
 
    z-index: -1; 
 
} 
 

 
label { 
 
    position: relative; 
 
    display: block; 
 
    padding: 0 0 0 4em; 
 
    font-weight: 300; 
 
    font-size: 20px; 
 
    line-height: 2.5; 
 
    cursor: pointer; 
 
    color: #000; 
 
} 
 

 
.tab-content { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    -webkit-transition: max-height .35s; 
 
    -o-transition: max-height .35s; 
 
    transition: max-height .35s; 
 
    padding: 0px 20px 00px 20px; 
 
} 
 

 
input:checked~.tab-content { 
 
    max-height: 9000px; 
 
} 
 

 
label::after { 
 
    position: absolute; 
 
    left: 23px; 
 
    top: 3px; 
 
    display: block; 
 
    width: 31px; 
 
    height: 45px; 
 
    text-align: center; 
 
    -webkit-transition: all .35s; 
 
    -o-transition: all .35s; 
 
    transition: all .35s; 
 
} 
 

 
input[type=radio]+label::after { 
 
    content: url(../images/up.png); 
 
} 
 

 
input[type=radio]:checked+label::after { 
 
    transform: rotateX(180deg); 
 
} 
 

 
input[type=radio]:checked+label { 
 
    color: #e79f39; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="tab"> 
 
    <input id="tab-1" type="radio" name="tabs2"> 
 
    <label for="tab-1">Tab 1</label> 
 
    <div class="tab-content"> 
 
    Content<div style="height:2000px;">spaace</div>space 
 
    </div> 
 
</div> 
 
<div class="tab"> 
 
    <input id="tab-2" type="radio" name="tabs2"> 
 
    <label for="tab-2">Tab 2</label> 
 
    <div class="tab-content"> 
 
    Content 
 
    </div> 
 
</div> 
 
blank space