Scrolling to an ID when a form is submitted?

Question

I am hoping someone can help me out. I am using a form script called Machform. The problem I am having is when my form is halfway down a page and a user submits the form they are automatically sent to the top of the page and therefore have to scroll back down to the form to see if there are any errors or if a success message is shown verifying the form was sent successfully.

The form itself is wrapped in a div with an ID (#mf_placeholder). I have been searching for a way to have the page scroll to this ID when the submit button is clicked but I know nothing about jquery or javascript. I have came across some things that sounded promising such as Smoothly scroll to an element without a jQuery plugin (which I cannot get to work due to my lack of knowledge on how to implement the code) and by trying to replace:

onload="javascript:parent.scrollTo(0,0);"  

with:

onload="javascript:this.scrollIntoView();"  

within the js file.

If I "remove" the first line of code above then clicking on the submit button makes the window stay exactly where it is when I click the submit button resulting in having to scroll up a bit to see the success or error message.

If I "replace" the first line of code above with the second line of code above then it gives me the desired result however it will not work because when you visit the page it automatically scrolls down to the form.

The js is as follows:

jQuery(document).ready(function($){
var mf_iframe_height;
var mf_iframe_padding_bottom = 0;

if($("#mf_placeholder").data("formheight") !== undefined){
  __machform_height = $("#mf_placeholder").data("formheight");
}

if($("#mf_placeholder").data("formurl") !== undefined){
  __machform_url = $("#mf_placeholder").data("formurl");
}

if($("#mf_placeholder").data("paddingbottom") !== undefined){
  var mf_iframe_padding_bottom = $("#mf_placeholder").data("paddingbottom");
}

var mf_iframe = $('<iframe id="mf_iframe" onload="javascript:parent.scrollTo(0,0);" height="' + __machform_height + '" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none" src="'+ __machform_url +'"><a href="'+ __machform_url +'">View Form</a></iframe>');
$("#mf_placeholder").after(mf_iframe);
$("#mf_placeholder").remove();

$.receiveMessage(function(e){      
  if(e.data.indexOf('run_safari_cookie_fix') != -1){
    //execute safari cookie fix
    var mf_folder = __machform_url.substring(0,__machform_url.lastIndexOf('/'));

    window.location.href = mf_folder + '/safari_init.php?ref=' + window.btoa(window.location.href);
    return;
  }else{
    //adjust the height of the iframe     
    var new_height = Number( e.data.replace( /.*mf_iframe_height=(\d+)(?:&|$)/, '$1' ) );
    if (!isNaN(new_height) && new_height > 0 && new_height !== mf_iframe_height) {
      new_height += mf_iframe_padding_bottom; //add padding bottom

      //height has changed, update the iframe
      mf_iframe.height(mf_iframe_height = new_height);

      //just to make sure the height is being applied 
      document.getElementById("mf_iframe").setAttribute('style','width:100%;border:none;height:' + new_height + 'px !important');
    }
  }

});

});

(I'm not sure why the last }); will not display within the code box)

To embed the form I am using this code:

<div id="mf_placeholder" data-formurl="xxx/forms/embed.php?id=10118" data-formheight="705" data-paddingbottom="10">

The code above also includes some script tags after the end of the div tag to include the js file above as well as a couple of others which will not display here for some reason.

Does anyone have any idea how I can get this to work? Ideally I'd really like to have the animated "scroll to" effect if possible as it is really slick. Please remember I know nothing about javascript unfortunately so I appreciate any help you can give me.

Thank you!