Question

我希望有人可以帮助我。我正在使用名为Machform的表单脚本。我遇到的问题是当我的表单在页面的中间位置并且用户提交表单时，它们会自动发送到页面顶部，因此必须向下滚动到表单以查看是否存在任何错误或是否存在错误显示成功消息，验证表单已成功发送。

表单本身包含在带有ID（#mf_placeholder）的div中。我一直在寻找一种方法，当点击提交按钮时，页面滚动到此ID，但我对jquery或javascript一无所知。我发现了一些听起来很有希望的事情，例如Smoothly scroll to an element without a jQuery plugin（由于我对如何实现代码缺乏了解，我无法工作）以及试图替换：

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

with：

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

在js文件中。

如果我“删除”上面的第一行代码，那么单击“提交”按钮会使窗口保持在我单击“提交”按钮时的位置，导致必须向上滚动一下查看成功或错误消息。

如果我用上面的第二行代码“替换”上面的第一行代码，那么它会给我所需的结果，但是它不起作用，因为当你访问页面时它会自动向下滚动到形式。

js如下：

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');
    }
  }

});

}）;

（我不知道为什么最后}）;将不会显示在代码框中）

要嵌入我正在使用此代码的表单：

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

上面的代码还包括div标签结束后的一些脚本标签，以包含上面的js文件以及其他一些由于某种原因不会在此处显示的文件。

有没有人知道如何才能让它发挥作用？理想情况下，如果可能的话，我真的很想拥有动画“滚动到”效果，因为它非常光滑。请记住，我对javascript一无所知，所以我感谢你能给我的任何帮助。

谢谢！

提交表单时滚动到ID？

0 个答案: