How can you use JavaScript/jQuery to scroll to the top of a DIV?

When a link is clicked, I have a <div> popup that appears. This popup contains scrollable content when there is overflow.

If the same link is clicked again, I want the <div> to be positioned at the top of the scrollable area. While this function works perfectly on Chrome and Firefox, in IE, the popup remains scrolled to the bottom.

<div id="myModal" data-role="popup" data-position-to="window" data-history="false" data-theme="a" data-corners="true" class="ui-content" style="text-align:center">
    <div class="modal-dialog">
         <div class="modal-content">
             <div id='myModalContent'></div>

             <a href="#" id="closeButton" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">OK</a>
         </div>
    </div>
</div>   
$(".anchorDetail").click(function () {
    $("#myModal").scrollTop(0);
}

Answer №1

Why not give this a shot? This script is written in pure JavaScript, no jQuery needed:

document.querySelector('.anchorDetail').addEventListener('click', function() {
var myDiv = document.getElementById('myModal');
myDiv.scrollTop = 0;
});

Answer №2

Appreciation for the insightful suggestions provided by everyone.

I can't believe how silly I was.
I mistakenly tried to scroll to the top before loading the data and opening the popup.

I made a simple adjustment - moving the .scrollTop() function after opening the popup - and it worked like magic.

Thanks once more to all those who helped out.

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

The rotation of Google Maps always returns to its default position when I open the map information window by clicking on it

I have successfully implemented a Google Map with tilt and heading functionality, allowing the map to rotate horizontally. However, I am facing an issue where clicking on a marker resets the map back to its original position. You can view the map by follo ...

How can one guide a glTF model in the direction it is pointed using A-frame?

I have a 3D model of my customized robot loaded in an A-frame scene using version 1.0.4. Currently, I am able to rotate the robot along its x, y, z axes, but I am facing an issue where it continues to move in its original direction rather than the one it i ...

The Symfony API failed to generate a response

There seems to be a problem when trying to link the Symfony API with a React application. The API is not providing any response, even though it works fine when accessed directly through the link. ApiDirectURL Fetching this data from the React app is yiel ...

What steps are involved in incorporating a machine learning algorithm from a Python file into a Django website?

I'm currently utilizing the random forest algorithm in Python to make predictions about college dropouts. The algorithm has been completed, and now I need to integrate the file into a website using Django. However, I am facing issues as the imported f ...

Is there a way to invoke JavaScript functions from external files in an EJS template?

I've got this new Ship file to add. The script that populates the fleet dropdown menu is working perfectly: new.ejs file: <% include ../partials/header %> <div class="container"> <div class="row"> <h1 style="text-al ...

Pinia throws a useStore is not callable error

I have been trying to resolve the issue with (0 , pinia__WEBPACK_IMPORTED_MODULE_1__.useStore) is not a function but unfortunately, I haven't been able to find a solution. Can anyone point out what mistake I am making? Here is my store.js code: im ...

Detecting the presence of a value in a particular class or id using jQuery

Take a look at the screenshot below for Room Types: Below is a snippet of my cshtml code. <div class="hotelRoomInfo"> @for (int i = 0; i < 6; i++) { var catId = "roomcatID_" + i; ...

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

My backend markdown compiler generates the HTML content, and I need Angular to retrieve data from the server, dynamically render the content, and display it. An example of the mock markdown content is: <h1 id="test1">Test 1<a href="#test1" title ...

"Optimizing Image Display in Web Browsers

Currently, I am using JavaScript to dynamically size a transparent .gif on my website. The original image size is approximately 200x200 pixels, but it's usually resized to be between 600x600 and 800x800. When viewing the resized image in IE8 and FF3, ...

Enhance your Underscores Wordpress Theme by incorporating a secondary sidebar option

Started a new Wordpress site using the Underscores theme (_s) Successfully added one sidebar, but now looking to add a second one with different widgets on the same page. After adding the new sidebar to the functions.php file and seeing it in the Wordpre ...

Retrieve an item from a MongoDB database using Mongoose

It seems like a simple problem, but my brain is struggling to comprehend the issue at 2 AM. I'm working on creating a profile page that displays basic public information. My approach involves retrieving the user's username from MongoDB based on t ...

Tips for styling a button upon being clicked

Is there a CSS technique to make a button change color when clicked with the mouse? I am aware of using ':hover' for changing color, but I need something specific to a left mouse click. I want the same functionality as a standard button but with ...

App builder shows raw HTML code instead of generating a dynamic table

I am currently working on an application that requires gathering data in a csv format from Google Sheets and importing it into App Inventor. Additionally, I need to include HTML code to display the table in a more visually appealing way. Here is what the ...

Parallax not functioning properly due to CSS before and after elements

I am attempting to use before and after pseudo-elements for a parallax effect on my div element <div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_ima ...

Ways to time animations differently and activate two animations at the same time in every loop

I have 3 hidden text boxes that I want to fade in and slide down simultaneously by 40px when the DOM loads. They should be staggered so that each one triggers after the previous animation finishes. Below is the relevant JavaScript code snippet: jQuery(fu ...

Assessing the value of a variable or expression embedded within a string in Sass

Creating a mixin to set a div to transparent requires special attention to evaluate a variable in a string. The -ms-filter line must be quoted and should include the result of a calculation ($amount * 100). How can I successfully incorporate this into my ...

What is the method to obtain an object as the return value from a click function in JavaScript?

I would like to retrieve the cell value from a table by clicking on a button. I have already created a function called getDetail in JavaScript that is implemented on the button, but I am facing difficulty in returning the value from the function. <butto ...

Displaying images in a React app using Node.js

I receive the image from the user as formdata Here is how I structured the Schema for the image The Image has been successfully stored in Monogodb This is my process of fetching image information using Axios I implement code for rendering the image on the ...

Exploring Next.js: A Guide to Implementing Browsing History in Your Application

Struggling to add entries to browser history when using Next.js's Link property for page navigation. Unable to push history entry, leading to incorrect page location in my application when going back. Any ideas on implementing this feature in Next.js? ...

How can I hide a root layout component in specific nested routes within the app directory of Next.js?

Is there a way to prevent rootlayout from being wrapped around dashboardlayout? Explore the latest documentation for Next.js version v13: https://i.sstatic.net/M0G1W.png Take a look at my file structure: https://i.sstatic.net/nVsUX.png I considered usi ...