如何滾動到更早被隱藏的div，但會在標籤上點擊

我試圖將我的網頁滾動到一個div，一旦我點擊標籤就會看到它，它不起作用。如何滾動到更早被隱藏的div，但會在標籤上點擊

的jsfiddle： Demo.html http://jsfiddle.net/sathish_panduga/8w8gughf/

我也跟着教程動畫HTML，身體，但它不以某種方式工作。以下是腳本和演示html。

<script src="http://localhost/app/static/jquery-1.10.2.min.js"></script> 

<style type="text/css"> 
    .addDiv{ 
    font-size: 20px; 
    display:block; 
    margin-top:40%; 
    border:solid; 
    width:16%; 
    border-color:#808080; 
     } 
.addDiv + input{ 
    display:none; 
} 
.addDiv + input + *{ 
display:none; 
} 
.addDiv+ input:checked + *{ 
display:block; 
} 
.inner { 
    border: 1px solid green; 
    width: 100%; 
    height: 600px; 
} 
.inner1 { 
    position:relative; 
    width:50%; 
    height:500px; 
    float:left; 
    background:#808080; 
    background-color:#808080; 
    overflow:hidden; 
} 
.inner2 { 
    position:relative; 
    width:50%; 
    height:500px; 
    float:left; 
    background:green; 
    background-color:green; 
    overflow:hidden; 
} 
</style> 
<body> 
    <script type="text/javascript"> 
     $("#button").click(function() { 
     $('html, body').animate({ 
      scrollTop: $("#moredetails1").offset().top 
     }, 2000); 
    }); 
</script> 

<label class="addDiv" for="_1" id="button">Add more details?</label> 
<input id="_1" type="checkbox"> 

<div class="inner" style="margin-top:20px;" id="moredetails1"> 
    <div class="inner1"> 
     <section> 
      Enter Name:<input type="text" /><br /><br /> 
     </section> 
    </div> 
    <div class="inner2"> 
     <section> 
      Enter Name:<input type="text" /><br /><br /> 
     </section> 
    </div> 
</div>

我缺少什麼上面的jQuery？

來源

2015-11-06 Satheesh Panduga

在HTML標記或使用文檔準備事件元素下面的職業腳本 –

嗨沃爾夫，我試着把腳本放在文檔準備好的事件..它仍然不工作:( –

我已經編輯YOUT CSS和腳本

jsfiddle : https://jsfiddle.net/ArtyukhAlex/63wy2g0r/1/

使你的腳本捕獲的div頂偏，你需要它在animate函數在執行時的那一刻是可見的，所以最好的解決辦法是顯示和隱藏它與腳本而不是CSS。

來源

2015-11-06 21:10:29 AlexArtyukh

非常感謝亞歷克斯！ –

如何滾動到更早被隱藏的div，但會在標籤上點擊

回答

相關問題