Load the page using AJAX and automatically scroll to the anchor within the loaded content

I want to achieve an automatic scroll to the beginning of a loaded page after using ajax to load it. Here is the code snippet I currently have:

html

<button class="btn btn-info btn-lg" type="button" id="photos"> <i class="fa fa-plus fa-5x"></i><br>Add Photo</button>

Additionally, at the bottom of the page, there is this block of javascript:

$(document).ready(function(){
$("#photos").click(function(){
    $(".content-loader").fadeOut('slow', function()
    {
        $(".content-loader").fadeIn('slow');
        $(".content-loader").load('somepage.php?pid=3');
    });
});

The current setup successfully loads 'somepage.php?pid=3' into

<div class="content-loader">
. How can I implement an autoscroll to
<div class="content-loader">
once the content has been loaded?

Answer №1

If you want the .load() function to scroll on load completion, try using the following code:

$(".content-loader").load('somepage.php?pid=3', function () {
  $('html,body').animate({scrollTop: $(".content-loader").offset().top});
});

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

Incorporating Distinct Items into an Array with JavaScript

There is a Filter object that stores information about different Car Types. The data is fetched via AJAX calls - on the first call, objects 0-10 are created and added to an array. Subsequent calls bring more car types which are also appended to the array. ...

angularjs code to dynamically change the selected index of an option in a document

This code snippet demonstrates how to achieve this functionality using pure JavaScript: document.getElementById("mySelect").selectedIndex = "0" <select class="selectpicker" id="mySelect"> <option>English &nbsp;</option> < ...

Encountering issues with integrating interactjs 1.7.2 into Angular 8 renderings

Currently facing challenges with importing interactive.js 1.7.2 in Angular 8. I attempted the following installation: npm install interactjs@next I tried various ways to import it, but none seemed to work: import * as interact from 'interactjs'; ...

The Express Generator is having trouble detecting the routes within the users file when using app.use('/login', users)

Having used the express generator, I am facing confusion regarding why I cannot utilize the users.js routes file for my login routes. I have created the POST route below, and when I keep it in app.js, everything works smoothly. However, if I attempt to mo ...

The PUT Method encounters errors when the model string contains a value that interacts with the web API

Here is a webapi method that I am working with: // PUT api/Competitions/5 public HttpResponseMessage PutCompetitor(int id, CompetitionViewModel competitorviewmodel) { ... } The structure of the CompetitionViewModel is as follows: public class Compe ...

How can I retrieve x-data from an external file using Alpine.js?

I recently started exploring Alpine.js and grasped the fundamentals, but I'm facing challenges when trying to move functions outside of inline script tags. Consider this snippet from index.html: <div x-data="{ loading: false }"/> &l ...

Refresh the webpage when using the browser's back or forward button in AngularJS with ui-router

In my AngularJS app, I have configured the ui-router state as follows: $locationProvider.html5Mode(true); $stateProvider .state('index', { url: '/index?zoom&center', views: { ...

Sharing stickers with Discord.js version 13

I have encountered an issue while trying to forward messages sent to my bot via DM. Everything is functioning smoothly, except for sending stickers. Whenever I attempt to send a message with a sticker, an Error DiscordAPIError: Cannot use this sticker is ...

What is the best method for displaying an HTML string within an HTML file in Angular 5?

I have declared an array in my TypeScript file like this: import {Component, OnInit} from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-foo', template: ...

Issue encountered with JavaScript AJAX involving a Cross Domain ASMX Web Service JSONP Request

I have been working on a local web service that I believe fits the criteria for making cross-domain JavaScript calls to access external data within Dynamics CRM. However, I am facing some challenges in creating the JavaScript AJAX code needed to connect wi ...

The Bootstrap navbar stubbornly refuses to hide after being clicked on

Is there a way to adjust the data-offset-top for mobile view? Additionally, I am having trouble hiding the menu when clicking on a link. I have tried some code from stackoverflow without success. Can someone please assist with this issue: <nav class= ...

Guide to incorporating a jade file into a node.js application after executing an Ajax request

While working on my node.js application, I encountered an issue with loading a new HTML file using Ajax on a button click. Despite everything else working perfectly, the new HTML file was not being loaded. This is how I am making the ajax call in my main. ...

What could be causing the sporadic functionality of my jQuery image resizing code?

Seeking help for an issue I am facing with my jQuery code. I have been trying to scale a group of images proportionally within an image carousel using jCarousel Lite plugin. However, the resizing code seems to work randomly and I can't figure out why. ...

The header that sticks on scroll is annoyingly blocking the content

I managed to create a sticky on-scroll header/navigation bar successfully. Here is how it looks now However, I encountered an issue. When it reaches the top, it automatically 'covers' the top part of my content, which has text on it, and I don& ...

When using res.redirect in Express, it not only redirects to a new URL but also allows you to access the HTML

I'm having an issue with redirecting a user to a login page when they click a button. Instead of being redirected, I am receiving the html source code and nothing is happening. My express redirect method is as follows: function customRedirect(req, ...

transmitting various data with ajax requests

I need assistance in sending the data stored in the variable named "blog_id" to the page called "blog_img_upload.php", along with the form_data. Here are the codes: var blog_id = "<?php echo"$blog_id"?>"; let form_data = new FormD ...

Ways to utilize jQuery.post() function within Joomla

I have created a custom component for Joomla. Within this component, I am trying to implement a form where the user can input their name and then send it to the server using AJAX. Below is the code snippet I have used in the default.php file: <?php def ...

Guidance on creating a smooth fade-out effect for a div using jQuery when a text box is left blank

Currently, I am trying to send the contents of a textbox with the class "searcher" via an AJAX request triggered by the keyup event. My goal is to avoid sending the AJAX request if the textbox with the class "searcher" is empty and also clear the content o ...

The function of slidetoggle is malfunctioning when clicked

I currently have two dynamic containers with one displaying grouped boxes, quantities, and totals, while the other shows detailed information. Both container values are added dynamically at runtime. By default, the grouping container is displayed on the p ...

PHP: Dynamically update div content upon submission

I am attempting to update the "refresh" div after clicking the Submit button and also at regular intervals of 5 seconds. Despite looking through various resources, I have not been able to find a solution that meets my requirements. <script src="h ...