PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, September 8, 2022

[FIXED] How to stop scrolling to top after an ajax call

 September 08, 2022     ajax, html, javascript, jquery, scrolltop     No comments   

Issue

I update a certain content of htm element with setInterval function to call an ajax every few sec

<div class="content">
<p>New informaton here</p>
<br>
<p>.......</p>
more information below
</div>

below is the javascript

var main = function(){
        updatingMessage = setInterval(function(){
         $.ajax({
        type: "POST",
        url:" call_MYSQLDatabase_To_Update_Content.php",
        cache:0,
        data:({
           some vars
             }),
        success:function(result){
         $(".content").html(result);
                          }
                 });  
                       }, 1000);
     updatingMessage();
        }
$(document).ready(main);

What's bother me is everytime when I scroll down to see the information it will scroll to the top of itself after each ajax call.
Is there anyway to stay at the same <p>'s position after an ajax call ?


Solution

First you must get the element's scroll position, then make sure you maintain that position by setting the scrollTop attribute to the original position.

var position = element.scrollTop;

//do some work here, which might change the position

element.scrollTop = position;


Answered By - Adviov
Answer Checked By - Timothy Miller (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing