Question

but only find scrolling solutions.

What I’m trying to do is move a circle across the screen using animate (left or right), then of course up / down, which I can do.

The issue is when I want the browser to scroll with the circle up / down if needed, in a nice smooth manner.

This is some simple quick dirty code I wrote just to mess around

$('#circle').animate({'left': (start)+'px'},'slow').fadeIn('slow', function(){
        $(this).animate({'left': '+='+(stopRight)+'px'}, 2000, function(){
            $(this).animate({'top': '+='+(downRight)+'px'}, 2000, function(){
                $(this).animate({'left': '-='+(leftRight)+'px'}, 2000, function(){
                });
            });
        });
    });

Where / how would i make it scroll, Any suggestions tip, I plan on getting ride of the code I have below anyways.

Answer 1

This is a working solution, based on your animation sequence:

See this working Fiddle Example!

HTML

<div id="circle"></div>

CSS ^{normalized on the Fiddle, but not relevant}

html, body {
  width: 100%;
  height: 100%;
}
#circle {
  width: 20px;
  height: 20px;
  background-color: #444;
  border: 1px solid #212121;
  border-radius: 10px;
  position: absolute;
  top: 300px;
  left: 300px;
}

jQuery ^{You will need the plug-in .watch(), see link below}

// initial values to your variables
var start     = 0,
    stopRight = 1000,
    downRight = 300,
    leftRight = 300;

// your code as it was
$('#circle').animate({'left': (start)+'px'},'slow').fadeIn('slow', function(){
  $(this).animate({'left': '+='+(stopRight)+'px'}, 2000, function(){
    $(this).animate({'top': '+='+(downRight)+'px'}, 2000, function(){
      $(this).animate({'left': '-='+(leftRight)+'px'}, 2000, function(){});
    });
  });
});

// the code to make it all happen!
$('#circle').watch("left,top", function() {
    $("html, body").animate({
        scrollTop  : $('#circle').offset().top,
        scrollLeft : $('#circle').offset().left,
    }, 20);
}, 100);

Plug-in used

jQuery CSS Property Monitoring Plug-in

---

What this does is to track the element movement and manipulate the scrollbars to keep it visible at all times.

The jQuery .scrollTop() ^{Get the current vertical position of the scroll bar for the first element in the set of matched elements.}

The jQuery .scrollLeft() ^{Get the current horizontal position of the scroll bar for the first element in the set of matched elements.}

The jQuery .offset() ^{Get the current coordinates of the first element in the set of matched elements, relative to the document.}