Strategies for smoothly navigating the page to a specific div every time

Question

Strategies for smoothly navigating the page to a specific div every time

Currently, I am working on a form that requires submitting multiple child forms. To enhance user experience, I have incorporated jQuery functionality to display a message at the top of the page upon each submission. Now, my goal is to implement a feature where the page automatically scrolls up to the specific div called by jQuery after each submit event.

 var url = "<%=addPersonalDetailsURL%>";    
 var type = "addPersonalDetails";
if(!($('#<portlet:namespace/>address1').val()=='' || $('#country').val()=='None' ||$('#<portlet:namespace/>primaryPhone').val()=='')){
 jQuery.getJSON(url+"&address1="+address1+"&address2="+address2+"&country="+country+"&state="+state+"&city="+city+"&zip="+zip+"&skypeId="+skypeId+"&twitter="+twitter+"&primaryPhone="+primaryPhone+"&secondaryPhone="+secondaryPhone+"&type="+type, function(data) {


            $('html, body').animate({
                scrollTop: $(".success").offset().top
            }, 800);


        for(var z=0; z<data.applicationArray.length;z++){

            applicationArray = data.applicationArray[z].split("$$##$$##");

            address1 = applicationArray[0];
            address2 = applicationArray[1];
            city = applicationArray[2];
            primaryPhone = applicationArray[3];

        }

Upon processing the jQuery.getJSON result, I need to adapt your solution accordingly. Can you provide guidance on how to modify the code to achieve this functionality?

javascript jquery html css

Answer 1

Answer №1

To achieve the desired effect of moving the scroll to a specific element's top position on the page, you can utilize the following code snippet:

jQuery(window).scrollTop(jQuery(".highlight").offset().top);

It is important to note that the above code will scroll to the first occurrence of an element with the class .highlight. If you need to target a particular instance, you can specify the index in the selector like this:

jQuery(window).scrollTop(jQuery(".highlight:eq(2)").offset().top);

Answer 2

To achieve the desired effect of moving the scroll to a specific element's top position on the page, you can utilize the following code snippet:

jQuery(window).scrollTop(jQuery(".highlight").offset().top);

It is important to note that the above code will scroll to the first occurrence of an element with the class .highlight. If you need to target a particular instance, you can specify the index in the selector like this:

jQuery(window).scrollTop(jQuery(".highlight:eq(2)").offset().top);

Answer 3

Answer №2

If you want to achieve this effect, you can use the following function:

$("button").click(function () {
    $('html, body').animate({
        scrollTop: $(".specificElement").offset().top
    }, 800);
});

Here's how it works:

When a button is clicked, the page will smoothly scroll to the element with the class specificElement within 800 milliseconds.

For example:

$(".btn1").click(function () {
    $('html, body').animate({
        scrollTop: $(".btn2").offset().top
    }, 800);
});

$(".btn2").click(function () {
    $('html, body').animate({
        scrollTop: $(".btn3").offset().top
    }, 800);
});

$(".btn3").click(function () {
    $('html, body').animate({
        scrollTop: $(".btn1").offset().top
    }, 800);
});

.spacer {
    height: 1300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn1">Button 1</button>

<div class="spacer"></div>

<button class="btn2">Button 2</button>

<div class="spacer"></div>

<button class="btn3">Button 3</button>

Answer 4

If you want to achieve this effect, you can use the following function:

$("button").click(function () {
    $('html, body').animate({
        scrollTop: $(".specificElement").offset().top
    }, 800);
});

Here's how it works:

When a button is clicked, the page will smoothly scroll to the element with the class specificElement within 800 milliseconds.

For example:

$(".btn1").click(function () {
    $('html, body').animate({
        scrollTop: $(".btn2").offset().top
    }, 800);
});

$(".btn2").click(function () {
    $('html, body').animate({
        scrollTop: $(".btn3").offset().top
    }, 800);
});

$(".btn3").click(function () {
    $('html, body').animate({
        scrollTop: $(".btn1").offset().top
    }, 800);
});

.spacer {
    height: 1300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn1">Button 1</button>

<div class="spacer"></div>

<button class="btn2">Button 2</button>

<div class="spacer"></div>

<button class="btn3">Button 3</button>

Strategies for smoothly navigating the page to a specific div every time

Answer №1

Answer №2

Similar questions

Utilize the serialized data to pre-fill the form fields

jquery technique for toggling a single button

Creating an Ionic 3 canvas using a provider

Utilizing React Native Camera Kit allows for the seamless and continuous scanning of QR codes, offering multiple callbacks when a code is

Is there a way for me to retrieve the widths of all child elements within an HTML document?

Ensure that the CSS grid has a minimum span of 3 columns, and if a class object is the only item in a grid row, it

Analyzing input from the user for string comparison

List of Nodes with five links

The format of the date cannot be modified when using DesktopDatePicker as a React Component

Can React components receive props or data when they are inserted into regular HTML code?

When attempting to add an image to a table, I struggle to do so without disrupting the alignment of the surrounding cells

Encountering issues with webpack module federation and single-spa-vue integration, specifically with Vue version 2.16.12

Changing Background Color on Div Click

Having trouble sending messages on the server?

Incorporating CSS code directly into a PHP webpage instead of linking to an external CSS

Separate a tab delimited text file and store it into an array using JavaScript

Users are encountering timeout issues when attempting to connect to the Azure Postgres flexible database through the node.js server deployed on the Azure App Service

Executing Actions Prior to Redirecting

"Trouble in Transmitting: Node.js Fails to

What is the relationship between JavaScript and the height of a window?