使用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？

回答

相关问题