Question

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

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

你可以看到我到目前为止here。

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

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

Answer 1

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

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

应该工作。

Answer 2

撇开罗伯特的回答，你可以通过不使用哈希来清理它。

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

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

Answer 3

Chad和Robert提供的两个答案都是有效的，但是，我喜欢用不同的方式写出来。

以下是基于jsFiddle的示例。 JS是你需要的部分。

＆＃13;

$(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
	});
});

＆＃13;

/* 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;
}

＆＃13;

<!-- 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>

＆＃13;

Jquery：slideToggle，然后滚动到div

3 个答案: