Changin the scroll when clicking on a new step in stepper

Can you provide a code snippet? The stepper itself does not have any feature that will force scrolling after the step is changed, so I need to cannot help you troubleshoot without an example that replicates the problem.

Here is the code for the form:

{% set giftcopy = content('donationform/giftcopy') %}
{% set click = ' - Click to Proceed' %}

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<script src="https://js.stripe.com/v3/"></script>

<div class="form-header ivy green">{% content 'donationform/giftheader.txt' %}</div>
<div class="instructions orange text-uppercase">{% content 'donationform/instructions.txt' %}</div>

<!-- start donation form -->
<div id="donationform" class="mt-1 border border-1 p-sm-3 p-1">
    <ul class="stepper" id="stepper-form" data-mdb-stepper-linear="true" data-mdb-stepper-init data-mdb-stepper-vertical-breakpoint="768" data-mdb-stepper-animations="false">
        <form id="donation-form" class="needs-validation stepper-form" data-request-validate data-request-flash novalidate>

            <!-- start gift -->
            <li class="stepper-step ">
                <div class="stepper-head ps-0">
                    <span class="stepper-head-icon">1</span>
                    <span class="stepper-head-text text-uppercase">{% content 'donationform/step1.txt' %}</span>
                </div>
                <div class="stepper-content ps-2">
                    <input type="hidden" name="fee_percent" value="{{ccfeepercent}}" id="fee_percent">
                    <input type="hidden" name="fee_amount" value="{{ccfeeamount}}" id="fee_amount">
                    <input type="hidden" id="stripe_token" name="stripe_token" value="" />
                    <div class="row mb-5">
                        <div class="col-sm-12 ">
                            <label for="donation_type" class="label text-uppercase orange mb-3">{{giftcopy|striptags}}<span class="required">*</span></label>
                        </div>
                        <div class="w-100 ">
                            <div style="width:300px;">
                                <select data-mdb-select-init class="" name="donation_type" id="donation_type" required>
                                    <option value="">Please select</option>
                                    {% for donationtype in donationtypes %}
                                    <option value="{{donationtype.id}}">{{donationtype.name}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <span class="error_message" data-validate-for="donation_type"></span>
                        </div>
                    </div>
                    <!-- end gift -->

                    <div class="row my-5">
                        <div class="col-12 pe-0 pe-md-3 pe-lg-5">
                            <!-- start amounts -->
                            <div class="label mb-3 text-uppercase orange">Select an Amount<span class="required">*</span></div>
                        </div>
                        {% for amount in amounts %}
                        <div class="col-sm-6 col-md-4">
                            <!-- start hidden ad amount assigned value -->
                            <input type="hidden" name="myamount" id="myamount-{{amount.id}}" class="form-control" value="{{amount.amount}}">
                            <input type="hidden" name="myid" id="myid-{{amount.id}}" class="form-control" value="{{amount.id}}">
                            <!-- end hidden ad amount assigned value -->
                            <div class="amountChoice mb-4 rounded-9">
                                <input type="radio" id="amount_choice-{{amount.id}}" name="amount_choice" value="{{amount.id}}" class="amountRadio" required>
                                <label for="amount_choice-{{amount.id}}">
                                    {% if amount.id != 9 %}
                                    <h2>${{amount.amount}}</h2>
                                    {% else %}
                                    <h2 tabindex="0" role="button" data-mdb-placement="bottom" data-mdb-popover-init data-mdb-trigger="focus" title="Other Amount"
                                        data-mdb-content="Please enter an amount below">
                                        {{amount.label}}
                                    </h2>
                                    {% endif %}
                                </label>
                            </div>
                        </div>
                        {% endfor %}
                        <div class="invalid-feedback">Please Select an Amount</div>

                    </div>
                    <!-- end amounts -->

                    <!-- start total amount -->
                    <div class="row mb-5">
                        <div class="col-12">
                            <div class="label text-uppercase mb-3 orange">Total Amount</div>
                        </div>
                        <div class="col-12">
                            <div class="input-group mb-2 amountDiv">
                                <span class="input-group-text bg-white">$</span>
                                <input id="receipt_amount" name="receipt_amount" class="form-control receipt_amount" type="text" required>
                                <!-- <label for="receipt_amount">Amount<span class="required">*</span></label> -->
                                <input type="hidden" name="original_amount" id="original_amount" value="">
                            </div>
                        </div>
                        <span class="error_message" data-validate-for="receipt_amount"></span>
                        <div class="col-12">
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" id="include_fee" name="include_fee" value="1">
                                <label class="form-check-label d-block" for="include_fee">
                                    Please charge me a total of $<span id="totalWithFee"></span> to cover processing fees.
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- end total amount -->
                </div>
            </li>

            <!-- start personal information -->
            <li class="stepper-step" onclick="oc.request(this,'onValidateAmount')">
                <div class="stepper-head ps-0">
                    <span class="stepper-head-icon">2</span>
                    <span class="stepper-head-text text-uppercase">{% content 'donationform/step2.txt' %}{% if isMobile %}{{click}}{% endif %}</span>
                </div>
                <div class="stepper-content ps-2">
                    <div class="row mb-3">
                        <div class="col-12">
                            <div class="row">
                                <div class="col-12">
                                    <div class="label mb-3 text-uppercase orange">Your Information</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 mb-3">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="text" id="first_name" name="first_name" class="form-control" required>
                                    <label class="form-label" for="first_name">First name<span class="required">*</span></label>
                                </div>
                                <span class="error_message" data-validate-for="first_name"></span>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="text" id="last_name" name="last_name" class="form-control" required>
                                    <label class="form-label" for="last_name">Last name<span class="required">*</span></label>
                                </div>
                                <span class="error_message" data-validate-for="last_name"></span>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="text" name="address" id="address" class="form-control" placeholder="Address" required>
                                    <label class="form-label" for="address">Address<span class="required">*</span></label>
                                </div>
                                <span class="error_message" data-validate-for="address"></span>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-sm-5 mb-3 mb-md-0">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="text" name="city" id="city" class="form-control" placeholder="City" required>
                                    <label class="form-label" for="city">City<span class="required">*</span></label>
                                </div>
                                <span class="error_message" data-validate-for="city"></span>
                            </div>
                            <div class="col-sm-4 mb-3 mb-md-0">
                                <div id="partialCountryState">
                                    {% partial 'country-state' countryId=user.country_id stateId=user.state_id %}
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="text" name="zip" id="zip" class="form-control" placeholder="Zip" required>
                                    <label class="form-label" for="zip">Zip<span class="required">*</span></label>
                                </div>
                                <span class="error_message" data-validate-for="zip"></span>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 mb-3">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="text" id="email" name="email" class="form-control" placeholder="Email" required>
                                    <label class=" form-label" for="email">Email<span class="required">*</span></label>
                                </div>
                                <span class="error_message" data-validate-for="email"></span>
                            </div>
                            <div class="col-sm-6 mb-3">
                                <div data-mdb-input-init class="form-outline">
                                    <input type="text" name="phone" id="phone" class="form-control" placeholder="Phone Number" maxlength="12" required>
                                    <label class=" form-label" for="phone">Phone Number<span class="required">*</span></label>
                                </div>
                                <span class="error_message" data-validate-for="phone"></span>
                            </div>
                        </div>

                        <div class="row mb-3 pb-2">
                            <div class="col">
                                <div class="no-p-space text-uppercase">{% content 'donationform/usertype' %}</div>
                                {% for usertype in usertypes %}
                                <div class="form-check form-check-inline">
                                    <input type="checkbox" class="form-check-input" id="{{usertype.id}}" value="{{usertype.id}}" name="usertypes[]">
                                    <label class="form-check-label" for="{{usertype.id}}"></label>
                                    {{usertype.name}}
                                </div>
                                {% endfor %}
                            </div>
                            <span class="error_message" data-validate-for="usertypes[]"></span>
                            <div id="checkboxError" class="text-danger mt-2 d-none">Please select at least one user type.</div>

                        </div>

                        <div class="row d-block d-md-none">
                            <div class="col-12">
                                <div class="label text-uppercase mb-3 orange">NEXT - CLICK Display Name</div>
                            </div>
                        </div>

                    </div>
                </div>
            </li>
            <!-- end personal information -->

            <!-- start message -->
            <li class="stepper-step" onclick="oc.request(this,'onValidatePersonal')">
                <div class="stepper-head ps-0">
                    <span class="stepper-head-icon">3</span>
                    <span class="stepper-head-text text-uppercase">{% content 'donationform/step3.txt' %}{% if isMobile %}{{click}}{% endif %}</span>
                </div>
                <div class="stepper-content ps-2">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label for="display_option" class="form-label">Display Name Options<span class="required">*</span></label>
                            <select class="form-select" data-mdb-validation="true" name="display_option" id="display_option" required>
                                <option value="">Please select</option>
                                {% for displayoption in displayoptions %}
                                <option value="{{displayoption.id}}">{{displayoption.name}}</option>
                                {% endfor %}
                            </select>
                            <span class="error_message" data-validate-for="display_option"></span>
                        </div>

                    </div>
                    <div class="row display_name">
                        <div class="col-12 mb-5">
                            <div data-mdb-input-init class="form-outline">
                                <input type="text" name="display_name" id="display_name" class="form-control mt-1" placeholder="Display Name">
                                <label class="form-label" for="display_name">Display Name</label>
                            </div>
                            <span class="error_message" data-validate-for="display_name"></span>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-12">
                            {% set charcount = 240 %}
                            <label for="display_note" class="form-label">{% content 'donationform/messageinstructions.txt' %}
                                <a data-mdb-tooltip-init data-mdb-html="true" title="Use the virtual keyboard to enter Hebrew text. Use your regular keyboard to enter English text.">
                                    <i class="far fa-question-circle ms-1"></i>
                                </a>
                            </label>
                            <div class="form-outline" data-mdb-input-init>
                                <textarea class="form-control " id="display_note" name="display_note" rows="6" maxlength="{{charcount}}" length="{{charcount}}"
                                    placeholder="Enter your message."></textarea>
                            </div>

                            {# <div class="open-keyboard sans-serif mt-1"><i class="fad fa-keyboard fa-2x fa-pull-left me-2"></i>Click to use the virtual keyboard to enter Hebrew text.</div>
                            #}
                        </div>

                        <div class="row d-block d-md-none">
                            <div class="col-12">
                                <div class="label text-uppercase mb-3 orange">NEXT - CLICK Payment Options</div>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <!-- end message -->

            {# start payment information #}
            <li class="stepper-step" onclick="oc.request(this,'onValidateDisplayName')">
                <div class="stepper-head ps-0">
                    <span class="stepper-head-icon">4</span>
                    <span class="stepper-head-text text-uppercase">{% content 'donationform/step4.txt' %}{% if isMobile %}{{click}}{% endif %}</span>
                </div>
                <div class="stepper-content ps-2">
                    <div class="row ">
                        {# check for desktop or mobile #}
                        {% if isDesktop %}
                        {% partial 'form/desktop' %}
                        {% elseif isMobile %}
                        {% partial 'form/mobile' %}
                        {% elseif isTablet %}
                        {% partial 'form/mobile' %}
                        {% endif %}
                    </div>
                </div>
            </li>
            {# end payment information #}

        </form>
    </ul>

    <!-- Buttons -->
    <div class="d-flex justify-content-center px-3 mt-5">
        <button id="form-example-prev-step" class="btn btn-blue w-100 me-2" data-mdb-ripple-init>Previous step</button>
        <button id="form-example-next-step" class="btn btn-blue w-100" data-mdb-ripple-init>Next step</button>
    </div>
    <!-- Buttons -->

    <script>
        document.querySelector('.stepper').addEventListener('stepChange.mdb.stepper', (e) => {
            // e.preventDefault();
            console.log(e.nextStep);
            // console.log(e);

            // Scroll up 100px on mobile after step changes
            // console.info('scroll baby');
            // window.scrollBy({
            //  top: -100,
            //  behavior: 'smooth'
            // });

            // remove last next button
            if (e.nextStep == 3) {
                // e.preventDefault();
                console.info('step 4');
                document.getElementById('form-example-next-step').style.display = 'none';
            } else {
                document.getElementById('form-example-next-step').style.display = 'block';
            }

            // validation for checkboxes
            if (e.nextStep == 2) {
                console.info('STEP 2');
                oc.request('.stepper-step', 'onValidatePersonal');
                const checkboxes = document.querySelectorAll('input[name="usertypes[]"]:checked');
                const errorMsg = document.getElementById('checkboxError');
                if (checkboxes.length === 0) {
                    console.info('error');
                    e.preventDefault();
                    errorMsg.classList.remove('d-none');
                } else {
                    errorMsg.classList.add('d-none');
                    console.info('no error');
                    // stepper.nextStep();
                }
            }

            if (e.nextStep == 1) {
                console.info('STEP 1');
                oc.request('.stepper-step', 'onValidateAmount');
            }
        });
    </script>

</div>
<!-- end donation form -->

Prepare a snippet with placeholder data - your current example won't render outside of your project so I still don't know how it is suppose to look.

I've tried to create a stepper with similar settings and mock data data but I was not able to reaplicate the issue.