如何防止页面跳到底部？

Question

The page is jumping to the bottom when the submit button is pushed on the contact form. I think this is caused by js. When you want to try it, push the link below, next contact, fill in the form and press "verstuur"

http://expertlemmer.nl/PC-laptop-reparatie-Lemmer/

javascript:

$('form#contactForm button.submit').on('click', function() {

      $('#image-loader').fadeIn();

      var contactFname = $('#contactForm #contactFname').val();
      var contactLname = $('#contactForm #contactLname').val();
      var contactStraat = $('#contactForm #contactStraat').val();
      var contactPostcode = $('#contactForm #contactPostcode').val();
      var contactTel = $('#contactForm #contactTel').val();
      var contactEmail = $('#contactForm #contactEmail').val();
      var contactSubject = $('#contactForm #contactSubject').val();
      var contactMessage = $('#contactForm #contactMessage').val();

      var data = 'contactFname=' + contactFname  + '&contactLname=' + contactLname +
                 '&contactEmail=' + contactEmail + '&contactSubject=' + contactSubject +
                 '&contactStraat=' + contactStraat  + '&contactPostcode=' + contactPostcode  +
                 '&contactTel=' + contactTel  + '&contactMessage=' + contactMessage;

      $.ajax({

        type: "POST",
        url: "inc/sendEmail.php",
        data: data,
        success: function(msg) {

            // Message was sent
            if (msg == 'OK') {
               $('#image-loader').fadeOut();
               $('#message-warning').hide();
               $('#contactForm').fadeOut();
               $('#message-success').fadeIn();
            }
            // There was an error
            else {
               $('#image-loader').fadeOut();
               $('#message-warning').html(msg);
              $('#message-warning').fadeIn();
            }

        }

      });
      return false;
});

Answer 1

Hello i was on your webpage. And you are using in your script :

$('form#contactForm button.submit').on('click', function() {
   e.preventDefault();
// and so on

The problem is that, you do not pass the e in the function. You have to use it like this :

$('form#contactForm button.submit').on('click', function(e) {
       e.preventDefault();
    // and so on

Then it will prevent the form from refreshing the page. I am just guessing that you want to send the form through ajax.

Answer 2

Your form has no "ACTION" attribute, this means it's posting to the current URL. The current URL has an anchor : #contact, this means you'll jump straight to the contact part.

See what you get when you go into this link and scroll down(Scroll, don't click contact), you'll jump to the review section.

http://expertlemmer.nl/PC-laptop-reparatie-Lemmer/#journal

Long story short, Put an action tag on your form :)