Question

I have been reading around, and I am trying to have the screen move to the div that is being toggled. It is at the bottom of my site so when you toggle the contact form, you can’t tell it is there unless you scroll down.

I have this snippet of jQuery that doesn’t seem to be working

//contact toggle
$("#show-con").click(function(){
  $("#contact-wrap").slideToggle("slow");
  $("#contact-wrap").animate({scrollTop: $("#contact-wrap").offset().top});
});

The toggle works fine, but it will not scroll to the div.

I read some older articles on here, but unfortunately they linked out to sites no longer active.

Answer 1

This will work, use html, body for your selector:

$("#show-con").click(function(){
  $("#contact-wrap").slideToggle("slow");

  if ($("#contact-wrap").is(':visible')) {
     $("html, body").animate({scrollTop: $("#contact-wrap").offset().top});
  }
});

Also added check if element is visible only then scroll not otherwise.