摺疊標籤 - 跳到打開標籤

Question

我有手風琴標籤，這個手風琴設置爲最大1打開標籤，所以如果我打開一個標籤，然後我打開其他標籤，第一個標籤自動摺疊，並eveyrthing工程很好，但如果我有問題：當第一個標籤有很長的內容和用戶打開其他標籤，然後第一個標籤隱藏，並且頁面滾動遠遠低於打開的標籤，我想添加一些跳轉到打開的標籤。

我在開發網站：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