Cuando hago clic en href #demo-1 desde la página de inicio a otra página con la sección id='demo-1'. Cómo al cargar la página con id='demo-1', se desplazará hacia abajo desde la parte superior de la página. Si uso https://stackoverflow.com/a/3432718/6891215 , se sacudirá y no se desplazará desde la parte superior de la página hasta esa sección.
¡Muchas gracias!
El siguiente código le permite desplazarse tanto en las mismas páginas como en las externas. Para que el enlace funcione, debe asignarle una clase .scroll . Si está enlazando a un enlace ancla en una página externa, asigne al enlace un data-target="external" también.
$(document).ready(function() { $('html, body').scrollTop(0); var str = window.location.href; if(str.indexOf('#') > -1) { var anchor = str.substring(str.indexOf('#')); setTimeout(function() { $('html, body').animate({scrollTop: $(anchor).offset().top}, 'slow'); }, 100); } $('a.scroll').click(function(e) { var trg = $(this).attr('data-target'); if(trg != 'external') { e.preventDefault(); var href = $(this).attr('href'); $('html, body').animate({scrollTop: $(href).offset().top}, 'slow'); } }); });El enlace a un ancla en una página externa se verá así:
<a href="inner.html#demo_2" class="scroll" data-target="external">DEMO 2</a> Además, puede vincular a un ancla en la misma página. En este caso, no necesitará agregar ningún data-target . Escribí el guión de la forma en que es compatible con ambos:
<a href="#demo_3" class="scroll">Go TO DEMO 3</a>