abs

by Dominik Wilk

HTML

<button>Go</button>
<span class="result"></span>

<div id="component">
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p>Lorem ipsum sit amet dolor.</p>
  <p id="scrollToMe">Lorem ipsum sit amet dolor.</p>  
</div>

CSS

#scrollToMe {
  background: red;
}

JavaScript

$(function(){
  $( "button" ).on( "click", function() {
    //$( "p" ).append( "Started..." );

    $( "div" ).each(function( i ) {
      //$( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
    });

    var $html = $('html');
    var $scrollToMe = $('#scrollToMe');
    var offsetTop = $scrollToMe.offset().top;
		console.log(offsetTop);
    $html.animate({
      scrollTop: offsetTop
    }, 2000);
    
    $scrollToMe.animate({
      width: 240
    }, 2000);

    $( $html, $scrollToMe ).promise().done(function() {
      //$( ".result" ).append( " Finished! " );
      console.log('finished');
    });
  });
});