Question

I have this code and I don’t know how to do an automatic scroll to where the ball is moving. The ball moves out of the screen, up the page.

The code:

jQuery(document).ready(function($) {
$(".scroll").click(function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
}); 
});

$(function() {
    $( "#ball" ).draggable({ containment: "#containment-wrapper", scroll: false, revert: "invalid" });
    $( "#ball2" ).draggable({ containment: "#containment-wrapper", scroll: false, revert: "invalid" });
$( "#droppable" ).droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        drop: function( event, ui ) {
            $("#ball2").animate({left: '-=100', top: '-=250'}, 300);
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                    .html( "ball runs up" );
        }           
});
});

Answer 1

Can’t you just use scrollIntoView()?

http://www.quirksmode.org/dom/tests/scrollintoview.html