I'm using slideToggle to display a div when a navigation button is clicked. It's working, but the div that I'm displaying is pretty tall, so you don't actually see much of it once it loads. The div sits directly beneath the button you use to trigger slideToggle. I would like to find a way to slideToggle the div, and then have the window scroll to the nav button, automatically displaying the entire previously hidden div.

<a href="#"> doesn't work as it tries to jump to the element before the slideToggle function has executed. Is there a way to have the window scroll to the element after slideToggle has pleted?

You can see what I have so far here.

Click on the printables button to see what I'm talking about.

I also created a jsFiddle of the basic functionality, jsfiddle.

I'm using slideToggle to display a div when a navigation button is clicked. It's working, but the div that I'm displaying is pretty tall, so you don't actually see much of it once it loads. The div sits directly beneath the button you use to trigger slideToggle. I would like to find a way to slideToggle the div, and then have the window scroll to the nav button, automatically displaying the entire previously hidden div.

<a href="#"> doesn't work as it tries to jump to the element before the slideToggle function has executed. Is there a way to have the window scroll to the element after slideToggle has pleted?

You can see what I have so far here.

Click on the printables button to see what I'm talking about.

I also created a jsFiddle of the basic functionality, jsfiddle.

• javascript
• jquery

• Please post your code in the actual question. -1 – tckmn Commented Sep 6, 2013 at 21:08

3 Answers 3

The two answers provided by Chad and Robert are both valid, however, I like to write it a bit differently.

Below is an example based on your jsFiddle. The JS is the part you need.

$(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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

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

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

Should work.

Piggybacking off of Robert's answer, you could clean it up a bit by not using hashes.

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

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