javascript - Jquery：slideToggle，然后滚动到 div

Question

我用来在单击导航按钮时slideToggle显示。div它正在工作，但div我显示的内容非常高，因此一旦加载，您实际上看不到太多内容。div位于您用来触发的按钮的正下方slideToggle。我想找到一种方法slideToggle，div然后让窗口滚动到导航按钮，自动显示整个以前隐藏的div.

<a href="#">不起作用，因为它试图在slideToggle函数执行之前跳转到元素。有没有办法让窗口在slideToggle完成后滚动到元素？

你可以在这里看到我到目前为止所拥有的。

单击printables按钮以查看我在说什么。

我还创建了一个基本功能的 jsFiddle，jsfiddle。

Answer 1

捎带罗伯特的答案，你可以通过不使用哈希来清理它。

$('a').click(function(event){
    event.preventDefault();
    $a = $(this);

    $(element).slideToggle(250, function(){
        $(window).scrollTop($a.offset().top);
    });
});

Answer 2

$('a').click(function(event){
    event.preventDefault();

    $(element).slideToggle(250, function(){
        window.location.hash = "#content";
    });
});

应该管用。

Answer 3

乍得和罗伯特提供的两个答案都是有效的，但是，我喜欢写得有点不同。

下面是一个基于您的 jsFiddle 的示例。JS 是您需要的部分。

$(function() {
    $( "#button" ).on( "click", function() { //Click
	  $( "#content" ).slideToggle( "slow", function(){
			if ($(this).is(":visible")) { //Check to see if element is visible then scroll to it
				$('html,body').animate({ //animate the scroll
					scrollTop: $(this).offset().top - 25 // the - 25 is to stop the scroll 25px above the element
				}, "slow")
			}
		});
	  return false; //This works similarly to event.preventDefault(); as it stops the default link behavior
	});
});

/* This is for the example */
#button{
    display: block;
    margin: auto;
    margin-top:130px;
    height: 50px;
    width: 180px;
    background-color: #ccc;
}
#content{
    display: none;
    margin: 0 auto;
    height: 1200px;
    width: 170px;
    background-color: blue;
}

<!-- HTML for example -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="button">Click to expand content</a>
    
<div id="content">
</div>