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

Keeping the state of a React component intact when navigating back from the router

Imagine you have two React components, A and B. As component A is displayed on the page, the user makes changes that affect some of the states within A. The user then clicks a button to navigate to component B using router.push('/b'). Subsequentl ...

javascriptreactjs

Unable to determine why node.js express path is not working

const express = require("express"); const app = express(); app.use(express.static("public")); var dirname = __dirname; app.get("/:lang/:app",function(req,res){ console.log(req.params.lang + " " + req.params.app); ...

javascripthtmlcssnode.jsexpress

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

javascriptcssreactjsecmascript-6

Show data from an API in an HTML table

I encountered an issue with an API, and despite trying console.log(response.[""0""].body) to view the response in the console, it does not seem to be working. My goal is to extract all the data from the API and display it in a table. Below is my code: ...

javascriptajax

Sending form data after a successful AJAX request with jQuery in ASP.NET MVC 5

Within my Asp.net MVC 5 project, there exists a form equipped with a Submit button. Upon clicking this Submit button, the following tasks are to be executed: Client-side validation must occur using jQuery on various fields (ensuring required fields are ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-4

Using HTML code to incorporate one HTML file into another's structure

As a skilled programmer, I understand the importance of code reusability. Despite being new to HTML and CSS programming, I often find myself writing repetitive code in one HTML file. Is there a way to avoid this redundancy? Can functions be utilized in H ...

html

Retrieve all the items listed in the markdown file under specific headings

Below is an example of a markdown file: # Test ## First List * Hello World * Lorem Ipsum * Foo ## Second List - Item 1 ## Third List + Item A Part of Item A + Item B ## Not a List Blah blah blah ## Empty ## Another List Blah blah blah * ITEM # ...

javascriptnode.jsregextypescriptmarkdown

The specified timeout elapsed without the jasmine async callback being invoked

Having recently ventured into Protractor and javascript, I've encountered a persistent error that none of the existing solutions seem to shed light on. The issue revolves around understanding async callbacks within my Page Object model implementation. ...

javascriptnode.jsangularjsjasmineprotractor

Navigating through the properties of a JSON object and traversing the React state leads to encountering the error message 'state undefined'

Apologies if I seem a bit lost, but I'm attempting to assign a JSON object to a component's state for rendering purposes. This is the current setup within my component: render: function() { this.serverRequest = $.get(this.props.source, func ...

javascriptjsonreactjsget

Angular, choose, establish a default option

Despite my attempts, I am struggling to set the default option for a select element using AngularJS. My Technologies: AngularJS, Angular-UI-router, Bootstrap Key HTML snippet: <select ng-model="selectedCompany" ng-options="c.name for c in companies" ...

javascriptangularjsangular-ui

Display a tooltip when you click on a different element

I have a unique feature that I want to implement on my website. The idea is to display a tooltip when a user clicks on a specific div with the same ID as the tooltip. This will be particularly useful for interactive questions where users can click and reve ...

jqueryhtmlcsstooltip

JavaScript's failure to properly handle UTF-8 encoding

Here is a snippet of code that I found on Stack Overflow and modified: <?php header('Content-Type: text/html; charset=ISO-8859-1'); $origadd = $_SESSION["OriginAdd"] // $_SESSION["OriginAdd"] contains the value "rueFrédéricMistral"; echo $o ...

javascriptphpjsonhtml

Guide on obtaining the file path of an uploaded file through the use of HTML, JavaScript, and PHP

After successfully uploading an image from my drive, I am encountering an issue where I am unable to locate the folder path of that image For example: C:\Images\Logo\Image.png $('#pngfile').change(function (e) { var tmppath = URL ...

javascriptphphtml

adjusting the Rails response format to JS for an asynchronous request

I'm attempting to implement an Ajax request that triggers an update when a radio button is clicked without needing to refresh the entire page. The definition of the update action in my controller seems a bit lacking in documentation within Rails docs ...

jqueryruby-on-railsajax

Ways to Halt Every Single CSS Animation

Is there a way to stop all CSS animations in a document from the beginning? My idea is to assign a class to elements containing CSS animations at the start, such as '.paused'. Then, using jQuery in my JavaScript, I would remove the '.paused& ...

jquerycssanimationcss-animations

What is causing the error message stating that the DateTime class object cannot be converted to a string?

I found this code snippet on a programming forum function increaseDate($date_str, ${ $date = new DateTime($date_str); $start_day = $date->format('j'); $date->modify("+{$months} month"); $end_day = $date->format(&apo ...

phphtmldatedatetimestring-formatting

Table of Wordpress posts

There has been a question on how to easily add tables to blog posts without having to use HTML. While some are comfortable inserting the code directly into the blog, others like my friend prefer alternatives that don't involve coding. Is there a simpl ...

htmlcsswordpresscontent-management-system

When a child of a flex-item does not inherit the height of its parent in a flex container with a column direction and flex-basis set

Wow, that title was long! Let me try to clarify my confusion: So I have a flex-container with 2 flex items. <!-- HTML --> <div class="container"> <div class="item-1"> <div class="child-of-item-1"></div> < ...

htmlcssflexbox

How can PHP Ajax be used to determine when a modal should pop up?

Is there a way to automatically display a modal without refreshing the page? Currently, I have a button that submits to home.php and triggers the modal, but it requires a page refresh for the modal to appear. I'm looking for a solution that will eith ...

javascriptphpjquerymysqlajax

.encounter issue with loading Internet Explorer

Currently, I am utilizing the .load method to load some data into a div. It is functioning properly overall, but when attempting to specify and load a particular ID from the HTML, Internet Explorer fails to load anything. For example: $('div.myDiv&a ...

jqueryajaxinternet-explorer