<!DOCTYPE html>
<html lang="es-ES">

<!-- Mirrored from ecapy.com/scroll-animado-hasta-un-elemento-de-la-pagina-con-jquery/ by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 04 Dec 2016 15:30:35 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=UTF-8" /><!-- /Added by HTTrack -->
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Capy |   Scroll animado hasta un elemento de la pagina con jQuery</title>
			<link rel="shortcut icon" href="../wp-content/uploads/2016/01/1454276298_globe-01.png" type="image/x-icon"/>
		<link rel="stylesheet" type="text/css" href="#">

	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="../xmlrpc.php">
	<!--[if lt IE 9]>
	<script src="http://ecapy.com/wp-content/themes/prolog/js/html5.js"></script>
	<![endif]-->

	
<link rel='dns-prefetch' href='http://s.w.org/' />
<link rel="alternate" type="application/rss+xml" title="Capy &raquo; Feed" href="../feed/index.html" />
<link rel="alternate" type="application/rss+xml" title="Capy &raquo; RSS de los comentarios" href="../comments/feed/index.html" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/ecapy.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.6.1"}};
			!function(a,b,c){function d(a){var c,d,e,f,g,h=b.createElement("canvas"),i=h.getContext&&h.getContext("2d"),j=String.fromCharCode;if(!i||!i.fillText)return!1;switch(i.textBaseline="top",i.font="600 32px Arial",a){case"flag":return i.fillText(j(55356,56806,55356,56826),0,0),!(h.toDataURL().length<3e3)&&(i.clearRect(0,0,h.width,h.height),i.fillText(j(55356,57331,65039,8205,55356,57096),0,0),c=h.toDataURL(),i.clearRect(0,0,h.width,h.height),i.fillText(j(55356,57331,55356,57096),0,0),d=h.toDataURL(),c!==d);case"diversity":return i.fillText(j(55356,57221),0,0),e=i.getImageData(16,16,1,1).data,f=e[0]+","+e[1]+","+e[2]+","+e[3],i.fillText(j(55356,57221,55356,57343),0,0),e=i.getImageData(16,16,1,1).data,g=e[0]+","+e[1]+","+e[2]+","+e[3],f!==g;case"simple":return i.fillText(j(55357,56835),0,0),0!==i.getImageData(16,16,1,1).data[0];case"unicode8":return i.fillText(j(55356,57135),0,0),0!==i.getImageData(16,16,1,1).data[0];case"unicode9":return i.fillText(j(55358,56631),0,0),0!==i.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity","unicode9"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='crayon-theme-sublime-text-css'  href='../wp-content/plugins/crayon-syntax-highlighter/themes/sublime-text/sublime-text2f6a.css?ver=_2.7.2_beta' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-monaco-css'  href='../wp-content/plugins/crayon-syntax-highlighter/fonts/monaco2f6a.css?ver=_2.7.2_beta' type='text/css' media='all' />
<link rel='stylesheet' id='thm-style-css'  href='../wp-content/themes/prolog/style1c9b.css?ver=4.6.1' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='../wp-content/themes/prolog/css/font-awesome.min1c9b.css?ver=4.6.1' type='text/css' media='all' />
<link rel='stylesheet' id='quick-style-css'  href='../wp-content/themes/prolog/quick-style1c9b.css?ver=4.6.1' type='text/css' media='all' />
<link rel='stylesheet' id='themeum-preset-css'  href='../wp-content/themes/prolog/css/presets/preset31c9b.css?ver=4.6.1' type='text/css' media='all' />

<script type='text/javascript' src='../wp-includes/js/jquery/jqueryb8ff.js?ver=1.12.4'></script>
<script type='text/javascript' src='../wp-includes/js/jquery/jquery-migrate.min330a.js?ver=1.4.1'></script>
<link rel='https://api.w.org/' href='../wp-json/index.html' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="../xmlrpc0db0.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="../wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='Drupal 7: Lanzar un #state de un elemento de formulario por js (jQuery)' href='../drupal-7-lanzar-un-state-de-un-elemento-de-formulario-por-js-jquery/index.html' />
<link rel='next' title='BoF de Context vs panels' href='../bof-de-context-vs-panels/index.html' />
<meta name="generator" content="WordPress 4.6.1" />
<link rel="canonical" href="index.html" />
<link rel='shortlink' href='../index1528.html?p=2669' />
<link rel="alternate" type="application/json+oembed" href="../wp-json/oembed/1.0/embedfe44.json?url=http%3A%2F%2Fecapy.com%2Fscroll-animado-hasta-un-elemento-de-la-pagina-con-jquery%2F" />
<link rel="alternate" type="text/xml+oembed" href="../wp-json/oembed/1.0/embed2313?url=http%3A%2F%2Fecapy.com%2Fscroll-animado-hasta-un-elemento-de-la-pagina-con-jquery%2F&amp;format=xml" />
<style type="text/css" title="dynamic-css" class="options-output">body, p{font-family:Open Sans;font-weight:normal;font-style:normal;color:#1a1a1a;font-size:16px;}h1, h2, h3, h4, h5, h6{font-family:Roboto Slab;font-weight:400;font-style:normal;color:#1a1a1a;}#navigation .navbar-nav > li > a, .navbar-main .dropdown-menu > li > a{font-family:Open Sans;font-weight:normal;font-style:normal;color:#777777;font-size:16px;}</style><a title="Real Time Web Analytics" href="http://clicky.com/101338288"></a><script async src="//static.getclicky.com/101338288.js"></script><noscript><p><img alt="Clicky" width="1" height="1" src="//in.getclicky.com/101338288ns.gif" /></p></noscript></head>

<body class="single single-post postid-2669 single-format-standard">
	<div id="page" class="hfeed site">
		<header id="masthead" class="site-header header" role="banner">
			<div class="container">
				<div id="navigation" class="navbar navbar-default">
                    <div class="row">
                        <div class="col-sm-3">
        					<div class="navbar-header">
        						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        							<span class="icon-bar"></span>
        							<span class="icon-bar"></span>
        							<span class="icon-bar"></span>
        						</button>
        	                    <a class="navbar-brand" href="../index.html">
        	                    	<h1 class="logo-wrapper">
        		                    	Capy        		                    </h1>
        		                </a>
        					</div>
                        </div>

                        <div id="main-menu" class="col-sm-9">
                            <div class="hidden-xs">
                                <ul id="menu-principal" class="nav navbar-nav navbar-main"><li id="menu-item-2961" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2961"><a title="Drupal" href="../category/drupal/index.html"><span class="fa fa-drupal"></span>&nbsp;Drupal</a></li>
<li id="menu-item-2959" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2959"><a title="CSS y Maquetación" href="../category/css-y-maquetacion/index.html">CSS y Maquetación</a></li>
<li id="menu-item-2958" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2958"><a title="PHP" href="../category/php/index.html">PHP</a></li>
<li id="menu-item-2960" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-2960"><a title="Javascript" href="../category/js/index.html">Javascript</a></li>
</ul>                            </div>
                        </div><!--/#main-menu-->

                        <div id="mobile-menu" class="visible-xs">
                            <div class="collapse navbar-collapse">
                                <ul id="menu-principal-1" class="nav navbar-nav"><li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2961"><a title="Drupal" href="../category/drupal/index.html"><span class="glyphicon drupal"></span>&nbsp;Drupal</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2959"><a title="CSS y Maquetación" href="../category/css-y-maquetacion/index.html">CSS y Maquetación</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-2958"><a title="PHP" href="../category/php/index.html">PHP</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-2960 active"><a title="Javascript" href="../category/js/index.html">Javascript</a></li>
</ul>                            </div>
                        </div><!--/.#mobile-menu-->

                    </div><!--/.row--> 
				</div><!--/.container--> 
			</div>
		</header><!--/#header-->


    <section id="main" class="container">
        <div class="row">
            <div id="content" class="site-content col-md-9" role="main">

                
                    
                        <article id="post-2669" class="post-2669 post type-post status-publish format-standard has-post-thumbnail hentry category-js tag-javascript">
    <header class="entry-header">

            <div class="entry-thumbnail">
            <img width="850" height="253" src="../wp-content/uploads/2014/09/js-header.jpg" class="img-responsive wp-post-image" alt="js-header" srcset="http://ecapy.com/wp-content/uploads/2014/09/js-header.jpg 850w, http://ecapy.com/wp-content/uploads/2014/09/js-header-300x89.jpg 300w, http://ecapy.com/wp-content/uploads/2014/09/js-header-768x229.jpg 768w" sizes="(max-width: 850px) 100vw, 850px" />        </div>
    
    </header> <!--/.entry-header -->

    <div class="clearfix post-content media">
        <div class="pull-left">
            <h4 class="post-format">
                <i class="fa fa-thumb-tack"></i>
            </h4>

        </div>
    

    <div class="media-body">
        <h2 class="entry-title">
            <a href="index.html" rel="bookmark">Scroll animado hasta un elemento de la pagina con jQuery</a>
                    </h2> <!-- //.entry-title -->

        <div class="clearfix entry-meta">
            <ul>
                                <li class="author"> <i class="fa fa-user"></i> <a href="../author/capynet/index.html" title="Entradas de capynet" rel="author">capynet</a></li> 
                
                                <li class="publish-date"><i class="fa fa-calendar"></i><time class="entry-date" datetime="2014-04-11T19:51:51+00:00">11 Abr,  2014</time></li>  
                
                                <li class="category"><i class="fa fa-folder-open-o"></i><a href="../category/js/index.html" rel="category tag">Javascript</a></li>
                                
                                <li class="tag"><i class="fa fa-tags"></i><a href="../tag/javascript/index.html" rel="tag">JavaScript</a><br /> </li>
                
                 
                                
                                    <li class="edit-link">
                                             </li>
                            </ul>
        </div> <!--/.entry-meta -->

        <div class="entry-summary">
            <p>&#8220;<strong>#destino</strong>&#8221; es el id del elemento al que querés llegar. podes usar un class &#8220;<em>.destino</em>&#8221; o algo similar SOLO si hay un solo elemento en toda la pagina que tenga ese class.</p>
		<div id="crayon-58443643a6893138791800" class="crayon-syntax crayon-theme-sublime-text crayon-font-monaco crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover disable-anim" style=" margin-top: 12px; margin-bottom: 12px; ">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; ">
var dest = $("#destino").offset().top;
$("html, body").animate({scrollTop: dest});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style=""><div class="crayon-num" data-line="crayon-58443643a6893138791800-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-58443643a6893138791800-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style=" -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-58443643a6893138791800-1"><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">dest</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#destino"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">offset</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">top</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-58443643a6893138791800-2"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"html, body"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">animate</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">scrollTop</span><span class="crayon-o">:</span><span class="crayon-h"> </span><span class="crayon-v">dest</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div><p>Y como siempre, Chau!</p>
        </div> <!-- //.entry-summary -->
            </div>
 

    </div>

</article> <!--/#post-->
                                                     <div class="clearfix post-navigation">
                                <span class="btn-style previous-post pull-left"><a href="../drupal-7-lanzar-un-state-de-un-elemento-de-formulario-por-js-jquery/index.html" rel="prev"><i class="fa fa-long-arrow-left"></i> previous article</a></span>                                 <span class="btn-style next-post pull-right"><a href="../bof-de-context-vs-panels/index.html" rel="next">next article <i class="fa fa-long-arrow-right"></i></a></span>                            </div> <!-- .post-navigation -->
                                            
                                                                    
                    
                        
            </div> <!-- #content -->

            <div id="sidebar" class="col-md-3" role="complementary">
                

	<div class="my-profile clearfix">
		<div class="profile-bg">
						<img class="img-responsive" src="../wp-content/uploads/2016/01/14567-brick-wall-and-wood-floor-1920x1200-abstract-wallpaper.jpg">
			
						<div class="profile-img">
				<img class="img-responsive" src="../wp-content/uploads/2016/01/IMG-20150521-WA0007-1.jpg">
			</div>
					</div>

		<div class="profile-desc">
							<h2>Capy (Marcelo Tosco)</h2>
										<span>Desarrollador web</span>
									<p>Hola!. en mi blog casi siempre escribo sobre informática, pero no te extrañes si algún día aparece un post que no tenga nada que ver a lo que estés acostumbrado ;)</p>
					</div>

		
<div class="social-share">
	
	<ul>
		
			
			<li><a class="twitter" href="http://twitter.com/capynet" target="_blank" ><i class="fa fa-twitter"></i></a></li>
									<li><a class="linkedin" href="https://es.linkedin.com/in/capynet" target="_blank"><i class="fa fa-linkedin"></i></a></li>
											 
		
	</ul>
	
</div>




	</div>

                <div class="sidebar-inner">
                    <aside class="widget-area">
                                            </aside>
                </div>
            </div> <!-- #sidebar -->

        </div> <!-- .row -->
    </section> <!-- .container -->


        <footer id="footer">
        <div class="container">
            <div class="footer">
                <div class="row">
                                            <div class="col-sm-6">
                          <a href="http://asociaciondrupal.es/" target="_blank"><img class="alignnone size-full wp-image-3123" src="../wp-content/uploads/2016/01/miembro-aed_150x75.jpg" alt="miembro-aed_150x75" width="150" height="75" /></a>                        </div>
                    
                                    </div>
            </div>
        </div>
    </footer><!--/#footer-->
</div>

<link rel='stylesheet' id='crayon-css'  href='../wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min2f6a.css?ver=_2.7.2_beta' type='text/css' media='all' />
<script type='text/javascript' src='../wp-includes/js/imagesloaded.min55a0.js?ver=3.2.0'></script>
<script type='text/javascript' src='../wp-includes/js/masonry.mind617.js?ver=3.3.2'></script>
<script type='text/javascript' src='../wp-content/themes/prolog/js/bootstrap.min1c9b.js?ver=4.6.1'></script>
<script type='text/javascript' src='../wp-content/themes/prolog/js/jquery.prettyPhoto1c9b.js?ver=4.6.1'></script>
<script type='text/javascript' src='../wp-content/themes/prolog/js/jquery.countdown.min1c9b.js?ver=4.6.1'></script>
<script type='text/javascript' src='../wp-content/themes/prolog/js/main1c9b.js?ver=4.6.1'></script>
<script type='text/javascript' src='../wp-includes/js/wp-embed.min1c9b.js?ver=4.6.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/ecapy.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"Presiona %s para copiar y %s para pegar","minimize":"Click To Expand Code"};
/* ]]> */
</script>
<script type='text/javascript' src='../wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min2f6a.js?ver=_2.7.2_beta'></script>
</body>

<!-- Mirrored from ecapy.com/scroll-animado-hasta-un-elemento-de-la-pagina-con-jquery/ by HTTrack Website Copier/3.x [XR&CO'2014], Sun, 04 Dec 2016 15:30:36 GMT -->
</html><!--
     FILE ARCHIVED ON 18:44:02 Jan 27, 2020 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 12:57:14 Jan 18, 2021.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
-->
<!--
playback timings (ms):
  RedisCDXSource: 6.853
  esindex: 0.016
  PetaboxLoader3.resolve: 265.95
  LoadShardBlock: 108.505 (3)
  exclusion.robots.policy: 0.197
  captures_list: 137.714
  PetaboxLoader3.datanode: 104.145 (4)
  load_resource: 354.381
  exclusion.robots: 0.213
  CDXLines.iter: 18.333 (3)
-->