section - smooth scroll href jquery

Desplazamiento suave para anclar después de cargar nueva página

Question

Quiero navegar a un punto de anclaje en una página nueva, pero quiero que la página se cargue en la parte superior y luego desplace inmediatamente al punto de anclaje correspondiente. Se puede hacer esto?

Soy un novato completo con Javascript.

Este es el js que uso actualmente para un desplazamiento suave dentro de la página actual. Solo aplico una clase de ''scroll'' en el enlace.

¡Muchas gracias!

<script>
$(function(){
$(''.scroll'').on(''click'',function(e) {
e.preventDefault();
$(''html, body'').animate({ scrollTop: $($(this).attr(''href'')).offset().top + ''px'' }, 1000, ''swing'');
});
});
</script>

Answer 1

Como los navegadores detectan automáticamente el hash y te llevan a esa posición ...
Se me ocurre que primero podría restablecer la posición de desplazamiento a 0 y luego realizar el desplazamiento suave.

Algo como...

// to top right away
if ( window.location.hash ) scroll(0,0);
// void some browsers issue
setTimeout( function() { scroll(0,0); }, 1);
$(function() {
// your current click function
$(''.scroll'').on(''click'', function(e) {
e.preventDefault();
$(''html, body'').animate({
scrollTop: $($(this).attr(''href'')).offset().top + ''px''
}, 1000, ''swing'');
});
// *only* if we have anchor on the url
if(window.location.hash) {
// smooth scroll to the anchor id
$(''html, body'').animate({
scrollTop: $(window.location.hash).offset().top + ''px''
}, 1000, ''swing'');
}
});

Editar : Mueva el scroll(0,0) fuera de $(function(){...}); para evitar el parpadeo.
Además, se agregó Snippet con ejemplo de trabajo.
^{El efecto se aprecia mejor cuando se ve en pantalla completa}

 html, body {
margin: 0;
padding: 0;
}
.hidden-code {
display: none;
visibility: hidden;
opacity: 0;
}
.header {
background-color: #ccc;
padding: 5px;
}
.header li {
padding: 5px;
margin: 5px;
display: inline-block;
}
.articles > div {
border: 1px solid;
margin: 10px;
padding: 250px 50px;
background-color: #ccc;
}
div:before {
content: attr(id);
}
.footer {
text-align: center;
}

 <div class="header">
<ul>
<li>page header title/navbar</li>
<li><a class="scroll" href="#text-1">#text-1</a></li>
<li><a class="scroll" href="#text-2">#text-2</a></li>
<li><a class="scroll" href="#text-3">#text-3</a></li>
<li><a class="scroll" href="#text-4">#text-4</a></li>
<li><a class="scroll" href="#text-5">#text-5</a></li>
<li><a class="scroll" href="#text-6">#text-6</a></li>
<li><a class="scroll" href="#text-7">#text-7</a></li>
<li><a class="scroll" href="#text-8">#text-8</a></li>
</ul>
</div>
<div class="container">
<div class="content">
<div class="articles">
<div id="text-1"></div>
<div id="text-2"></div>
<div id="text-3"></div>
<div id="text-4"></div>
<div id="text-5"></div>
<div id="text-6"></div>
<div id="text-7"></div>
<div id="text-8"></div>
</div>
</div>
<div class="footer">company &copy; 2015</div>
</div>
<div class="hidden-code">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
// to top right away
if ( window.location.hash ) scroll(0,0);
// void some browsers issue
setTimeout( function() { scroll(0,0); }, 1);
// any position
$(function() {
// your current click function
$(''.scroll'').on(''click'', function(e) {
e.preventDefault();
$(''html, body'').animate({
scrollTop: $($(this).attr(''href'')).offset().top + ''px''
}, 1000, ''swing'');
});
// *only* if we have anchor on the url
if(window.location.hash) {
// smooth scroll to the anchor id
$(''html, body'').animate({
scrollTop: $(window.location.hash).offset().top + ''px''
}, 1000, ''swing'');
}
});
</script>
</div>