Steps to move a container to a specific position within a set timeframe, regardless of the distance involved

If you have a button element that, when clicked, moves an absolutely positioned div from the bottom of the page to the top with a smooth transition lasting 1 second, you may encounter a problem. The speed of the div's movement increases as the length of the page grows, matching the duration of the transition.

My inquiry is this: Is there a method to ensure that the div maintains a constant speed, regardless of the size of the page? For instance, the div should move at a fixed rate of 5px per second without speeding up or slowing down, continuing until it reaches its final destination.

I experimented with using the transition style, but, as mentioned earlier, the div's speed escalates, which is undesirable. I am seeking a solution where the div maintains a steady pace throughout its journey.

Answer №1

After some trial and error, I finally discovered the root of my issue. It turned out to be a simple mistake related to the position style. Instead of using position:absolute, I should have used position:fixed. Strangely enough, the problem seemed to resolve itself without me making any other adjustments.

I toyed with the idea of setting

div.style.transitionDuration = `${(document.getElementsByTagName('HTML')[0].outerHTML.length - document.body.scrollTop) / 100}ms`;
, but I haven't had a chance to properly test it yet.

In hindsight, I realize that my initial assumption about the positioning was incorrect since I clearly stated it was absolute. This oversight is on me. However, perhaps sharing this experience will benefit someone else :)

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

Is there a glitch in the code while attempting to identify if the scrollbar has reached the bottom?

Is it possible to ensure that the div output scrolls to the bottom after each keystroke, but only if the input textarea is already scrolled to the bottom? $("#inp").keyup(function () { if ((this == [0].scrollHeight)) { $("#out").scrollTop($( ...

Determining the completion of multiple functions using jQuery deferred

There are 3 functions in my code that handle data retrieved via AJAX. These functions update the page once the AJAX call is made. After calling the AJAX function, a loader is displayed. I want to hide this loader only after the AJAX call and all 3 functio ...

Following a POST request, the redirection functionality in Next.js seems to be malfunctioning

I am facing an issue with redirecting the user after submitting a form. I have a button that triggers a post request to my API route, which then inserts a row in the database. The goal is to redirect the user to / once everything is done. However, the retu ...

Setting a card to the center within a col-md in Bootstrap 4: Step-by-step guide

I'm looking to position this card in the middle, not centered. How can I achieve that? I've already attempted using my-auto, but it didn't work at all. Please take a look at my code and suggest any necessary changes. Thank you! https://i.s ...

What is the best way to convert API data into a currency format?

Hello, I need assistance with formatting data retrieved from an API into a currency format. The code below successfully retrieves the data but lacks formatting. For instance, if the data displays as 100000000, I would like it to be formatted as IDR100.000. ...

Dispose the inputpicker filter after setting the value

I am currently utilizing the "Jquery inputpicker plugin" for creating dropdown menus. More information about this plugin can be found here. To initialize my dropdown, I use the following code: $('#test').inputpicker({ data:[ {value:"1 ...

Utilizing AJAX and PHP POST to dynamically refresh innerHTML content with MySQL data updates

I've been trying to solve this problem for a long time now, and I've reached a point where I can't seem to figure it out. On a page, there are several forms where users input different information that gets submitted to a mySQL database usin ...

Is there a way to remove information with react and axios?

While working on a project, I encountered an issue with using .map() to create a list. When I console log the user._id on my backend, it displays all the ids instead of just the one I want to use for deleting individual posts by clicking a button. Each pos ...

What is the best way to access query string values using JavaScript?

Is it possible to retrieve query string values without using a plugin in jQuery? If the answer is yes, how can this be accomplished? If not, are there any plugins available that can help with this task? ...

Update the second and third HTML inputs simultaneously as the first HTML input is being edited

Currently, I am displaying the values from a database table in an HTML + PHP table. My objective is to modify the quantity or price of an article and have the total value update automatically up to the specific row being edited. Additionally, I would like ...

What is the best way to create separation between two buttons?

On my homepage header, there are login and register buttons. However, on wide screens, these two buttons appear without any space between them. It's only when the screen size is smaller that they collapse and create space. I'm looking for a way ...

Utilizing Ajax to selectively choose a radio button by its ID within an ASP.Net MVC framework

How can I check a radio button by id instead of value? Currently, I am dynamically populating a table using ajax and need to automatically select the radio button with a 'Y' default flag. This is the current code I have that checks the radiobutt ...

Is it possible to retrieve a secure XML file via an AJAX request?

Is it feasible to retrieve a secure XML file through an AJAX call? I currently have the following code that successfully retrieves the xml file: function loadXMLFile() { var filename = 'test.xml'; $.ajax({ type: "GET" ...

I noticed that my CSS style sheet is only working on three of my pages. What should I do to make sure it affects the fourth page as well?

I am currently facing an issue with my website where I have linked one .css stylesheet to 3 different pages. This is just a temporary template until I finalize the individual look of each page. After performing some div positioning on the site, most pages ...

How to make HTML break line in Django admin's view

I am trying to display this content using Django: Below is the code: class PurchaseOrder(models.Model): product = models.ManyToManyField('Product', null =True) def get_products(self): return "\n".join([p.products for p in ...

The utilization of local storage within Backgridjs

I am creating an app using Backbone.js (Marionette Framework) along with additional functionalities like Backgrid, Backbone local storage, Backbone Radio, epoxy, and Backbone relational model. Encountered Problem: An issue arises when utilizing the local ...

Inform jQuery that the draggable element is in the process of being dragged dynamically

Currently, this issue is a vital component of an ongoing task. Once we can resolve this issue, it will lead to the completion of this and another inquiry. The original objective can be found here: drag marker outside map to html element You can view the ...

How can an Angular directive effectively serve as a front-facing interface for interacting with other elements?

This question delves into the realm of Web Components, with the examples being written in Angular for its versatility in handling certain issues (such as replace even though it's deprecated) and familiarity to many developers. Update After consideri ...

Utilize the inherited background color for a linear-gradient effect

Here is the code snippet I am working with: <label className={classes.trigger} htmlFor={uniqueId} ref={labelRef} style={{ background: val, borderColor: val }} /> This is the corresponding CSS: .trigger { display: block; posit ...

What is the optimal backup plan for selecting rem as the font-size unit in a dynamic layout?

Recently, I started pondering the best fallback option to use when employing rem as the font-size unit. While pixels seem like a suitable choice, it becomes cumbersome to adjust every px-based font-size if you decide to modify the global font-size within a ...