Question

Currently I am creating a website mainly using a mix of PHP, SQL, and JS. I use the JS to dynamically pull up new data using PHP and SQL. The current issue I am running into is that I have a button that when clicked will have the page scroll to the current DIV every 2.5 seconds based on offset. The issue is the function does not find the NEW offset once the element has moved.

Code snippets:

…

$(".button").click(function() {
            $message_focus = "TRUE";
            $to_focus=($(".focus_on_this").offset().top);
        });

…

if ($message_focus = "TRUE") {
        $("html, body" ).animate( { scrollTop: ($to_focus) },{ queue:false, duration:750 } );
    }

…

That is where the main issue is. It all works fine, though it only goes to the initial div’s starting location. Thank you in advance for your response.

Answer 1

You have to recalculate .focus_on_this‘s position everytime you scroll the page:

var $message_focus = false;

$(".button").click(function() {
    $message_focus = true;
});

setInterval(function() {
    if ($message_focus == true) {
        $("html, body" ).animate({
            scrollTop: $(".focus_on_this").offset().top
        },{
            queue:false,
            duration:750
        });
    }
}, 2500);