Scroll the div back to the top when the form is submitted

I have set up a form in a pop-up using Bootstrap modal. The form is quite long, so after submission, the message appears at the top of the form. However, I want it to scroll to the top when the user submits the form so they can easily see the message.

Is this achievable? Since it's a pop-up modal, please take a look at my code below and let me know if there are any errors.

$(document).ready(function() {
     $('.reg-form').on('submit', function(e) {
        $('#register').on('shown', function() {
            $(this).scrollTop(0);
        });

        $('.load').fadeIn(500);
        var formData = new FormData(this);
    });
});

Below is the HTML for my pop-up modal.

<div id="register" class="modal" role="dialog">
    <button type="button" class="close" data-dismiss="modal">
        <img class="svg" src="<?php echo base_url(); ?>assets/images/modal-close.svg">
    </button>
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Register With Us</h4>
      </div>
      <div class="modal-body">
        //form goes here
      </div>
     </div>
</div>
</div>  

Answer №1

Absolutely, it can be done! Just insert the following line of code:

$('#register').animate({'scrollTop':0},800);

It seems like there is a mistake in the event name you used, instead of shown it should be shown.bs.modal. However, you can ignore that as long as you replace it with my suggested code above.

Answer №2

$("#form").scrollTop(0);

Make sure to include the code snippet above within the submit function, not the on shown function.

Answer №3

Easiest method

Scroll the window by a negative value of 10000 pixels horizontally and vertically.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the text on the button is aligned to the right and is positioned directly

Looking to adjust the alignment of the menu icon on the left side of the menu text. Unsure about the best approach with my current CSS - should I utilize a grid layout to separate them on one side each, or perhaps use flexbox to align them inline? Below i ...

Utilizing v-model for dynamic binding within a v-for iteration

I'm currently working on binding v-model dynamically to an object property within an array of objects. I am unsure about how to accomplish this task. The objective is to choose a user using the Select HTML tag and then display the list of that user&ap ...

Passport - Pairing Plan "Error|The username provided for sign_request() is not recognized"

Currently experimenting with duo in node.js using passport to test its implementation in an application....Utilizing a passport-duo strategy and encountering issues when trying to apply the example provided in my own project. The GitHub repository for pass ...

how to forward visitors from one URL to another in a Next.js application

I have an existing application that was initially deployed on , but now I want to change the domain to https://example.com. What is the best way to set up redirection for this domain change? I have attempted the following methods: async redirects() { r ...

Highcharts failing to connect the dots with lines between data points

UPDATE: After some investigation, it turns out that the issue stemmed from inconsistent intervals. By following the solution outlined in this post, the problem was easily resolved. I have implemented highcharts to create a chart, where the initial data po ...

Specify the content type header in IE request with AJAX

Is it feasible to specify the http content-type request header as 'application/json' while sending a cross domain jquery ajax http request from Internet Explorer? We are attempting to access a REST WCF service that relies on the content type pro ...

Why is the 3rd argument necessary when using useReducer?

According to the information provided in the documentation: [init, the 3d argument] allows you to separate the logic for determining the initial state outside of the reducer. This is particularly useful for resetting the state later in response to an ac ...

Obtain specific text from elements on a website

How can I extract a text-only content from a td tag like 'Zubr Polish Lager 6%'? <td width="35%">Amber Storm Scotch Ale 6% <br/>SIZE/LIFE: 330ml <b>CASE</b> <br/>UOS ...

Using ng-if in AngularJS to compare two objects

I am transferring between controllers with different formations, and I am attempting to use "ng if" to compare the ids, but it is not functioning as expected. Below is the code snippet: var postsApi = 'http://mywebsite.com/wp-json/posts?filter[p ...

Make multiple images in one row resize proportionally instead of wrapping them to the next line

My phone's screen is small and I want the three images to remain in the same row. In case they don't fit, they should shrink proportionately to maintain alignment (refer to image at the bottom). Consider the code snippet below: <div id="exam ...

Is it possible to use an onclick function to input JavaScript values into a password entry box seamlessly?

Is there a way to input password values continuously using a JavaScript onclick function into a password field? I have two images, one 'Blue' and one 'Red', that trigger an onclick function with the following values: Blue= w3! Red= T4 ...

The new experimental appDir feature in Next.js 13 is failing to display <meta> or <title> tags in the <head> section when rendering on the server

I'm currently experimenting with the new experimental appDir feature in Next.js 13, and I've encountered a small issue. This project is utilizing: Next.js 13 React 18 MUI 5 (styled components using @mui/system @emotion/react @emotion/styled) T ...

Struggling with dynamic values and regex while utilizing HTML template strings. Need help overcoming regex challenge

Feeling stuck and seeking advice on improving regex usage. For a one-time substitution, the code below works for replacing a single element like -link-. var testHtmlStr = '<tr>' + '<td class="eve"><div class= ...

Is it possible to automate the firing of setTimeout events using WebDriver?

Looking to test pages with numerous setTimeout functions, I'm searching for a way to expedite the code execution upon page load rather than waiting for it to run on its own. One idea is to inject custom JavaScript like this into the page before evalu ...

Is there a way to customize Angular's number filter?

I'm trying to achieve a consistent number format with Angular's number filter, regardless of the localization selected. After inspecting the Angular source code on GitHub, I found the implementation of the filter to be like this: function number ...

Sending a key/value object through an AJAX POST request to an MVC 5 Controller action method results in a null value

After spending several hours searching, I finally found it. I have an object filled with key/value pairs of questionIDs and answers. This is how the onCmplete method in survey.js generates questions/answers after the survey is finished. The object that nee ...

Imitate the experience of using aframe view manipulation

Is there a method to imitate user input in my Webvr application? Could I reproduce look controls in Aframe? <a-entity listener position="0 0 0" id="camera" camera="userHeight: 1.6" look-controls> ...

What could be causing my canvas to not display my sprite?

Currently, I am in the process of learning JavaScript and experimenting with creating games to make the learning experience more enjoyable. However, I am facing an issue while using EaselJS and CreateJS to develop these games as a beginner. I need some as ...

What is the best method for extracting [object Text] using XPath?

I'm currently working with Selenium and attempting to extract text from a node that contains the keyword "approved," but I'm unsure of how to retrieve and validate this specific text. Here is the node structure - <div class="Notification-bo ...

Developing an item with characteristics, utilizing an object literal

Ever since the release of jQuery version 1.4, it has been possible to create an element using an object literal where you can define the properties of the element... $("<div />", { id: "test", name: "test", class: "test-class" }); In ad ...