使用Jquery切換時強制滾動到div？

-2

我想讓頁面跳轉到用JQuery打開的窗口，但我沒有任何運氣。使用Jquery切換時強制滾動到div？

這是JavaScript的按鈕排（每一個顯示在窗口中不同的信息），你點擊打開的窗口：

<div id="individuals-full"> 
    <h1 style="text-align: center;">Individuals</h1> 
    <ul> 
    <li> 
     <a href="#adjustment-content"> 
     <div id="adjustment-of-status" class="individual-icons">Adjustment of Status</div> 
     </a> 
    </li> 
    <li> 
     <a href="#asylum-content"> 
     <div id="asylum" class="individual-icons">Asylum</div> 
     </a> 
    </li> 
    </ul> 
</div> 

<div id="info-panel"> 
    <div id="adjustment-content" class="toggle" style="display:none"> 
    <hr/> 
    <div class="down-arrow"></div> 
    <h1>Adjustment</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
    <div id="asylum-content" class="toggle" style="display:none"> 
    <hr/> 
    <div class="down-arrow"></div> 
    <h1>Asylum</h1> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi 
    tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div> 
</div> 

jQuery("#individuals-full a").click(function(e) { 
    e.preventDefault(); 
    jQuery(".toggle").hide(); 
    var toShow = jQuery(this).attr('href'); 
    jQuery(toShow).show(); 
}); 

function scrollToAnchor(aid) { 
    var aTag = $("a[individuals-full='" + aid + "']"); 
    $('html,body').animate({ 
    scrollTop: aTag.offset().top 
    }, 'slow'); 
} 

$("#individuals-full a").click(function() { 
    scrollToAnchor('#info-panel'); 
});

https://jsfiddle.net/xmb8a26u/2/

它打開並正常工作，但它不會向下滾動到窗口。另一個小問題是，當你再次點擊該按鈕時，它不會關閉（它一旦打開就會一直保持打開狀態）。這不是一個巨大的問題，但如果有什麼我可以修改來做到這一點，這將是可取的。

來源

2017-07-29 cma2032

你應該使用.toggle（）;爲了打開和關閉的div方法.. 檢查文檔：http://api.jquery.com/toggle/

來源

2017-07-29 12:14:55 user1744669

我做的不好解釋這個用這個平滑滾動，但.toggle打破它，因爲它會關閉，當下一個按鈕被點擊。我做了一個JSFiddle，並試圖把我的代碼跳轉到部分： https://jsfiddle.net/xmb8a26u/1/ – cma2032

可以

// Smooth scroll 
    $('html, body').animate({ 
    scrollTop: $('#info-panel').offset().top + (0) 
}, 700); 

**Complete Code** 
jQuery("#individuals-full a").click(function(e){ 
e.preventDefault();   
jQuery(".toggle").hide(); 
var toShow = jQuery(this).attr('href'); 
jQuery(toShow).show(); 

// Smooth scroll 
    $('html, body').animate({ 
    scrollTop: $('#info-panel').offset().top + (0) 
}, 700); 

});

來源

2017-07-29 14:52:17 user1744669

$(document).ready(function(){ 
 
$("#adjustment-of-status").click(function(){ 
 
\t $(".toggle:first").css("display","block"); 
 
\t $(".toggle:last").hide(); 
 
\t }); 
 
\t $("#asylum").click(function(){ 
 
\t \t $(".toggle:last").css("display","block"); 
 
\t \t $(".toggle:first").hide(); 
 
}); 
 
\t });

<body> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
\t <div id="individuals-full"> 
 
    <h1 style="text-align: center;">Individuals</h1> 
 
    <ul> 
 
    <li> 
 
     <a href="#adjustment-content"> 
 
     <div id="adjustment-of-status" class="individual-icons">Adjustment of Status</div> 
 
     </a> 
 
    </li> 
 
    <li> 
 
     <a href="#asylum-content"> 
 
     <div id="asylum" class="individual-icons">Asylum</div> 
 
     </a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div id="info-panel"> 
 
    <div id="adjustment-content" class="toggle" style="display:none"> 
 
    <hr/> 
 
    <div class="down-arrow"></div> 
 
    <h1>Adjustment</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
    <div id="asylum-content" class="toggle" style="display:none"> 
 
    <hr/> 
 
    <div class="down-arrow"></div> 
 
    <h1>Asylum</h1> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
 
    voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi 
 
    tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div> 
 
</div> 
 
</body>

來源

2017-07-30 10:08:09

使用Jquery切換時強制滾動到div？

回答

相關問題