Maintain scroll position during ajax request

I am working on a single-page website that contains numerous containers.

Each container's content is loaded dynamically via ajax, so they may not all be populated at the same time.

These containers have variable heights set to auto.

The website utilizes an advanced routing system that allows it to scroll to a specific element upon loading a designated URL.

My challenge is how to scroll to a particular container (e.g. container 5) and maintain its position while other containers are still loading. Currently, the scroll position changes whenever any of the containers load or update.

Is there a plugin or effective method to address this issue?

To see an example of the problem: http://jsfiddle.net/b6sno9cv/

// Global variable to define start-container:
var initialWidgetIdx = 10;

Desired outcome:

Scroll to container 10 and maintain that position (scrolling remains focused on this container), even while other containers are still being loaded.

(Once all containers are fully loaded and have fixed heights, the scrolling functions correctly without any issues)

javascriptjqueryhtmlcss

Answer №1

To determine the element's height, offsetHeight is used. In this scenario, you can verify the div's height in your ajax call and apply scrollBy as follows:

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState != 4) return
        if (xmlhttp.status == 200) {
            //perform necessary actions

            var scroll_height = document.getElementById('loaded_div').offsetHeight();
            window.scrollBy(0,scroll_height);
            }
        }

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

Utilizing Chart.js for generating a sleek and informative line graph

After executing a MySQL query, I obtained two tables named table1 (pl_pl) and table2 (act_act) with the following data: table1: label act_hrs Jan-19 7 Feb-20 8 Mar-20 9 table2: label pl_hrs Mar-20 45 Apr-20 53 I am looking to create a line cha ...

javascriptphpchart.jsdayofmonth

Navigating to a different directory using Node.js and ExpressJS route mapping

I'm struggling with setting up routing using ui.router. This is the structure of my folders: https://i.stack.imgur.com/Fu0A9.png In the app.js file within the javascripts folder, I have the following code: var app = angular.module('testing&ap ...

javascriptangularjsnode.jsexpressnpm

Node.js routing currently lacks the ability to easily verify the presence of a JWT token for every route

I have a node application where, upon routing to ('/login') with valid credentials, I generate a JWT token with an expiry time and direct the user to the next page. If the user tries to access any other route directly (e.g., '/home') af ...

javascriptnode.jsroutesjwt

React - Unable to perform 'removeChild' on 'Node' object: The specified node cannot be removed as it is not a child of this node

I am encountering an issue in my React project with the following structure: <div className="App"> <BrowserRouter> <BasicLayout title={"test"}> <Routes> <Route path="/home&qu ...

javascriptreactjs

Show the current temperature data retrieved from the weather API

I'm trying to figure out what's causing the issue with the temperature not displaying. Can anyone help me identify and fix the error? <script type="text/javascript"> $.ajax({ url: 'https://api.weather.gov/gridpoints/EWX ...

javascripthtmljsonajaxapi

My navigation bar's CSS code falls short of extending across the full width of my screen, leaving a gap of approximately 10 pixels before reaching the edges

Can someone help me figure out what went wrong? I've been trying to remove the margins but it's not working. The background colors of other elements seem to be seeping into this empty space. Any thoughts or suggestions would be greatly appreciate ...

htmlcss

What is the best way to run a lengthy task in Node.js by periodically checking the database for updates?

In my current setup, there is a routine that continuously checks the database for any pending work orders. Upon finding one, it needs to execute it promptly. The system can handle only one work order at a time, and these tasks may vary in duration from 5 s ...

javascriptnode.jstimerqueue

What is the best way to implement alphabetical pagination using Material UI Pagination?

I am attempting to display a list of words using MUI pagination, arranged in alphabetical order. Previous format 1,2,3,...,26 Desired format A,B,C,...,Z wordsList: { A: [], B: [], ..., Z: [] } ...

javascriptmaterial-ui

It is not possible to submit a form within a Modal using React Semantic UI

I am working on creating a modal for submitting a form using React semantic UI. However, I am encountering an issue with the submit button not functioning correctly and the answers not being submitted to Google Form even though I have included action={GO ...

javascriptcssreactjssemantic-ui

Incorporating JSON data seamlessly into a visually appealing Highcharts pie chart

It seems like I'm facing a minor issue here. Everything was working fine until... $(document).ready(function() { // Original data var data = [{ "name": "Tokyo", "y": 3.0 }, { "name": "NewYork", "y": 2.0 }, { "name": "Berlin", ...

javascriptjqueryjsonhighchartsgetjson

In TypeScript, an interface property necessitates another property to be valid

In the scenario where foo is false, how can I designate keys: a, b, c, bar as having an undefined/null/optional type? Put simply, I require these properties to be classified as mandatory only when foo is true. interface ObjectType { foo: boolean; a: nu ...

javascriptangularjsreactjstypescriptredux

The functionality of a button within an AngularJS directive is not functioning as intended

I am trying to use a directive twice on one page. Inside the directive, there is a button that should toggle between showing the two directives when clicked. However, I'm encountering an issue where the values are not changing even though the ng-click ...

javascripthtmlangularjsangular2-directives

Use jQuery to drag an element and display controls in a designated area

I am trying to develop a tool that allows me to drag an image from one section to another, and upon dropping it, the following actions should take place: 1 - The dragged image should revert back to its original position 2 - A set of controls should be add ...

javascriptjqueryjquery-uidrag-and-drop

Displaying a group of elements in ReactJS

I'm currently working on assembling an array using different JSX components. There's a function I've created that populates this array with components and then returns it. let components = []; switch (obj.type) { case 'title': ...

javascriptreactjsmaterial-ui

Tips for removing a row from a table

I've been working on a responsive data table where each time I click an add button at the end of a row, a new row is added with the add button turning into a delete button. Below is the code I've implemented: The Table: <table id="invoice_ta ...

javascriptjqueryhtml

What is the best way to implement dynamic generation of Form::date() in Laravel 8?

Is there a way to dynamically generate the Form::date() based on the selection of 1? If 1 is selected, then display the Form::date() under the Form::select(). However, if 0 is selected, then hide the Form::date() in this particular view. For example: Sel ...

javascriptphphtmlajaxlaravel-8

Error message: Trying to call the prepare() function on a null variable within the CRUD system

I have implemented a CRUD system on my website. The main page (avisos.php) displays a table with all the existing records. When a user clicks on the "ADD NEW RECORD" button, the following script is triggered: $("#btn-add").click(function(){ $(".co ...

javascriptphpjquerymysqlajax

Ways to resolve the issue with the Argument of type 'Date[]' not matching the parameter type '(prevState: undefined) in React

I've encountered an issue while trying to construct my project. The error message reads as follows: Argument of type 'Date[]' is not assignable to parameter of type '(prevState: undefined) Here's the excerpt of the code in questio ...

javascriptreactjstypescriptnext.js

Can individual column searching be implemented in datatable on the server side?

I am facing some challenges with implementing column filters in datatables server-side. The filter columns are visible but do not seem to be functioning properly. I have reviewed various resources such as the links provided below, but I still cannot resolv ...

jquerycodeigniterdatatables

Choose the "Hidden" option if it has been previously selected in another select element within

For instance: If id="select[1]" is set to value=1 id 2-5 cannot also be assigned to value=1 <?php for($i= 0;$i<5;$i++){ ?> <select id="select[]" name="select[]"> <option hidden selected>Please Select</option> ...

phpjqueryarraysjquery-selectors