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

Question

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?

javascript ajax

Answer 1

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});
});

Answer 2

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});
});

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

Answer №1

Similar questions

Steps for setting up i18nextStart by including the i

Achieve full height without scrolling in React

Modifying the value of a React input component is restricted when the "value" field is utilized

Avoiding Webpack externals when using library components / fragments

Equalize the color of overlapping background events with non-overlapping background events in fullcalendar

A straightforward method of transmitting data from JavaScript to the Python back-end within a Streamlit application

Visualizing data with a grouped bar chart in D3.js

Find the difference between the sum of diagonals in a 2D matrix using JavaScript

I'm having trouble with the calculator, unable to identify the issue (Typescript)

Should the secret for express-session be a fixed value or should it change dynamically?

Using jQuery to create a flawless animation

Create a new function within the GraphQL Resolvers file

Continuously generate new objects every second

"Declare the Status, Refresh the Page, and Specify the Web

Proceed with this task only if the data loaded through ajax has the required content

The visibility of buttons can be controlled based on the selected radio option

Using AngularJS to automatically include predefined data in an $http request

The div has extra white space at the bottom due to the Hide/Show content feature

The orthographic camera in Three.js offers a unique perspective for rendering

Encountering an issue with a MEAN application using Angular 2: The error message states "Cannot read property