Using Vuejs to implement scrolling to the top of a specific div element

I have a division containing text, and when I submit that text, new data is obtained from the server. If I happen to be at the bottom of the original text, the newly received text also appears at the bottom. Ideally, I would like the page to scroll up to the top of the text each time new data is retrieved.

<b-row class="question-top mb-3" >
    <b-col xl="12" md="12" sm="12" xs="12">
    <div class="question-editor"> 
        <ckeditor :editor="editor" v-model="free_text" :disabled="editorDisabled"></ckeditor>
    </div>
    </b-col>
</b-row>

//style
.question-editor{
    overflow-y: auto; //this enables scrolling within the div
}
methods(){
  getData() {
    axios...CODE..

    //scrolling to the top of the div after receiving new data
    var topElement =  document.querySelector('.question-editor');
    scrollTo(topElement, 0, 100);
  }
}  

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

Get the PDF file and access it with Ajax technology

I am facing an issue with my action class that is responsible for generating a PDF. The code snippet shown sets the contentType appropriately. public class MyAction extends ActionSupport { public String execute() { ... ... File report = si ...

Create a virtual camera in Three.js that produces an optically-inverted (mirror-image) result

In my Three.js project, I have a scene with various objects and text that are viewed through a single camera named camera_A. The output of this camera goes to a viewport_A on one part of my webpage. Now, I want to add a second camera (camera_B) that will ...

Modifying the HTML <select> element with JavaScript

[resolved] I'm encountering an issue with the code below that is supposed to dynamically change the options in a second drop-down menu based on the selection made in the first menu. I've tried to troubleshoot the problem but haven't been suc ...

Refreshing a React page will lead to props being empty

The situation I am facing is that the code appears to be correct, but for some reason, when the web page loads, this.props.items does not seem to be passed to Item. Strangely, when I attempt to display this.props.items in console.log, nothing shows up. How ...

Updating a value within destructuring and a loop: A step-by-step guide

My Goal: I aim to modify a value in an object that is part of an array element. Take a look at the code snippet below for a clearer understanding. An issue arises when I update the object's value through reference instead of creating a new copy, cau ...

Current component encountering: Unfamiliar user-defined element

I'm encountering an issue while attempting to utilize a component within another component. During the created event, I am able to successfully log this component and retrieve the correct object. However, for unknown reasons, it appears that the compo ...

Utilizing jQuery for AJAX-Based Deletion of Records

Hey, I stumbled upon a code snippet that allows me to delete a row from my database using Ajax. However, there seems to be an issue where the table that should disappear when deleted is not working properly. Here is the JavaScript code: <script type=" ...

What could be the reason behind the failure of $cookieStore.get() in retrieving the value?

I am currently testing the cookie functionality in AngularJS. I'm encountering an issue where the console is returning 'undefined' when trying to retrieve a saved value from the cookie using $cookieStore.put(). It seems to work fine when set ...

Navigating the dynamic components in Vue using dynamic routing

I'm currently developing an application that helps users manage maintenance tasks. I have successfully created a component to display all the data stored in an array of objects. However, I am facing a challenge in redirecting users to different pages ...

Eliminating the spacing between elements to create a seamless design

Currently immersed in the creation of a new website, I am facing an issue with closing the margin gap on the right side of the page. The problem persists despite setting the body's margin to 0px. Any assistance in resolving this issue would be greatly ...

What is the purpose of Vue emitting and propagating to the parent component?

As a newcomer to Vue, I encountered an issue with my child component. In the code snippet below, I added a validator using the 'emits' property, expecting that if the validation fails, the parent event handler would not be called. However, to my ...

Cut the text within each individual container

For many of you, the question I'm about to ask is quite simple. Take a look at the following HTML code: <div class="content" id="content"> <div class="container" id="container"> <h1>Title</h1> <img class ...

Is there a way to change the color of the icon when the input fields are filled?

I am trying to change the color of the related icon for inputs when they are focused on or not empty, but my code doesn't seem to be working correctly for non-empty inputs. <div class="form-group"> &l ...

Navbar active class not updating on jQuery page scroll

My one-page website has a fixed navbar that I want to change its active status when scrolling down to specific div positions. Even though I tried using jQuery, the code doesn't seem to work as intended. Here is the snippet: // SMOOTH SCROLLING PAGES ...

Developing a website with all features and functionality using only traditional coding techniques

When I mention "Vanilla Coding", I mean websites that rely solely on HTML, JavaScript, and CSS without any server side coding like PHP or ASP. I've noticed there are many websites out there that seem to function perfectly fine without using common se ...

Refresh Vue/Nuxt Components Fully

Understanding how this.$forceUpdate() functions, I am not simply looking to re-render the component. In Nuxt applications, page components have asyncData() as a lifecycle method that runs before created(). I utilize this method to retrieve initial data an ...

What is the best way to retrieve a response from a modal dialog using jQuery?

Is there a way to utilize an add-in such as simple-modal or the dialog add-in in the UI kit to achieve AJAX interaction with the server? I am looking for a solution that allows the modal to communicate with the server and return the result back to the ca ...

Calculating the number of days between two dates with angular

I need assistance with my application. I have an API response that includes a message sent date, and I am looking to calculate the difference in days between the current date and the date from the API response using Angular 8 along with map in ngFor. Here ...

Are you able to create autonomous VueJS components using webpack?

After successfully creating a single-page application using vuejs-templates/webpack, I am now working on developing a static website. Since most of the content is static, there is no need for it to function as an SPA. The basic HTML/CSS layout has already ...

Protractor - Chrome is denying access to this webpage when attempting to access it automatically

Currently, I am familiarizing myself with Protractor as the tool for automating website testing. Specifically, I am running tests on the following page: , using Google Chrome browser. The issue at hand is: 1. Protractor successfully navigates to . 2. Ma ...