Scrolling up the page following the addition of a new row

https://i.sstatic.net/QLBEe.png

Description

  1. After clicking the plus button in the image above, a new row is created using jQuery autocomplete.

https://i.sstatic.net/Xf5Et.png

Description

  1. The image above illustrates the page displaying when scrolled to the middle.

https://i.sstatic.net/42Vpy.png

Description

  1. Upon clicking the plus button in the image above, the save button below and the jQuery suggestion results are not fully visible. https://i.sstatic.net/PPYAR.png

What I'm Looking For

  1. I am looking for a solution where the page automatically scrolls up when adding a new row, ensuring that all elements, like suggestion results, are fully visible.

Answer №1

Execute this JavaScript command when a new row is added:

window.scrollTo(0, document.body.scrollHeight)

By doing this, the page will automatically scroll to the bottom.

If there is content below the list, such as a div with a height of 10 that you don't want to scroll past:

divHeight = 10
window.scrollTo(0, document.body.scrollHeight - divHeight)

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

Concatenating strings with JavaScript

I am currently working on building a web page using a combination of html and javascript. I have a json file that provides inputs for some specific content I need to display. My main goal is to set up an address variable in order to show the Google Maps AP ...

"ExceptionThrownByMoveTargetOutOfBounds in Selenium WebDriver for IE9 and Firefox

Having trouble with the FireFox/IE9 driver in Selenium? When using the Actions class and its moveToElement method, I keep encountering a MoveTargetOutOfBoundsException error. Despite trying different solutions like Coordinates, Point, and javascriptexecuto ...

php modes breaking away from traditional php

My recent inquiry was regarding the distinction between HTML and PHP separation. While tutorials and examples often mention this concept, I have realized that it goes beyond what most people talk about - specifically relating to PHP modes. Is there a need ...

How can HTML be utilized to create a brief description?

I want to insert a link into the brief description that says "Read More..." which will direct the buyer to the main description further down on the product page when clicked. Can someone please provide guidance on how to achieve this? The URL for the link ...

Exploring ways to loop through a JSON array and embed it into an HTML element

After the ajax request, the data returned is structured as follows: Data = [ ["18/02/2019", "A"], ["19/03/2019", "B"], ["21/05/2019", "C"], ] The ajax request was successful and the data is stored in a variable named Data within a function. ...

Position the second line of text to align in MUI

I am facing an issue with aligning the text on the second line. It should match up with the text on the first line. For reference, you can check out the Codesandbox by CLICKING HERE <Card sx={{ maxWidth: 200 }}> <CardMedia component="i ...

rearrange the div elements by shifting each one into the one preceding it

Do you consider this a child and parent div relationship? <div class="container"> <p>content</p> </div> <div class="footer"><p>content</p></div> <div class="container"> <p>content</p> < ...

Django is looking for a primary key that I do not possess

Encountering an issue: invalid literal for int() with base 10: 'ljrh' This error occurs when attempting to add a new entry in a model: day = itemize(value, getday(strip(key))) add = Reoccurring(request.user.username, strip(day.Day), strip(day. ...

Button click triggers CSS animation

Check out the interactive demo $(document).ready(function(){ $('#btn-animate').click(function(){ animate(); }); $('#btn-remove').click(function(){ $('.to-animate').removeClass('animate'); }); func ...

Unable to retrieve the 'href' on different pages

Why am I unable to retrieve the "href" from other pages, but still can on the first page? Is there something wrong with it? Will changing the Xpath allow me to get all "href"s from every page? !pip install selenium from selenium import webdriver import t ...

Is there a way to dynamically update one input field while another input field is being modified? [HTML / JS]

I have a form with 3 input fields. One of the inputs is disabled, while the other two are enabled. The goal is to combine the values entered in the enabled fields to populate the disabled field. How can this be achieved? Is it possible for the value in th ...

Creating an engaging user experience with a Django form

Creating a dynamic calculator <div id="calculator"> <h2>Calculate the price of sawing materials</h2> <form method="post" action="{% url 'products' %}"> {% csrf_token %} & ...

Monitoring changes within the browser width with Angular 2 to automatically refresh the model

One of the challenges I faced in my Angular 2 application was implementing responsive design by adjusting styles based on browser window width. Below is a snippet of SCSS code showing how I achieved this: .content{ /*styles for narrow screens*/ @m ...

Want to ensure a span is perfectly centered both vertically and horizontally within a div using minimal CSS code?

I am currently working with LESS (CSS) and facing an issue with aligning a span element (which contains button text) inside a div container (button). The span is horizontally centered but vertically aligned to the top. I also want the span to automatically ...

Photos inside a flexbox do not resize correctly

When placing 2 images inside a flexbox with the column direction, I anticipated that the images would resize accordingly when adjusting browser window size. However, this is not the case. Regardless of the CSS styles applied, I am unable to maintain the o ...

Changing a background image url using jQuery by clicking a button

I'm struggling to find a way to use jQuery to add a background image URL to my CSS. Everything I've attempted so far has been unsuccessful. let button = document.querySelector('form button.btn') button.addEventListener('click&ap ...

I am experiencing difficulty getting my CSS styles to apply to my application that is being rendered using zappa, express, and node.js

Here is a link to my code: http://pastebin.com/jcLRCrQr Although everything else seems to be working fine - CSS sheets loading correctly, JavaScript files functioning properly - I am facing an issue where the styles are not being applied. An odd thing I ...

Issue with accessing $index.$parent in function parameter within ng-repeat in AngularJS

Can anyone with more experience please explain to me why this particular code compiles successfully: <li class="btn dropdown top-stack breadcrumb-btn" ng-repeat="nodeName in selectedNodeNames"> <a class="dropdown-toggle btn-anchor"> ...

An issue arises in vue.js where the v class binding takes precedence over other bindings and fails to properly remove

I have a game with a punching bag where I want to incorporate an animation class each time the bag is clicked. Once the health meter hits zero, I intend to replace the bag image with one depicting a burst bag. Things are running smoothly up until the poin ...

Ensure that all of the <li> elements within a <ul> container have equal widths

I've been grappling with this problem for the past day, and despite restarting from scratch multiple times, I can't seem to make a horizontal CSS flyout header function as intended. The dropdown section should expand to fit the content width (id ...