Redirecionar para uma div em uma página diferente com rolagem suave?
Histórico da pergunta:
Eu tenho um site de 2 páginas. Ambas as páginas usam o mesmomasterlayout.cshtml página que apresenta uma barra de navegação. Na barra de navegação, há vários links que rolam para os divs relevantes na página um com base em seus IDs.
O problema:
Quando acesso a segunda página, não consigo mais redirecionar para as divs especificadas nos links Navbar na primeira página. Isso faz sentido, pois o foco não está mais na primeira página, mas como contornar esse problema?
Código:
Aqui está o código Navbar com o conjunto de IDs div, observe odata-id
atributos que especificam qual div deve rolar para:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#" class="scroll-link" data-id="Welcome">Welcome</a></li>
<li><a href="#" class="scroll-link" data-id="features">Club</a></li>
<li><a href="#" class="scroll-link" data-id="About">About Us</a></li>
<li><a href="#" class="scroll-link" data-id="Location">Location</a></li>
<li><a href='@Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
Exemplo de uma div que é rolada para:
<div id="Welcome">
//HTML
</div>
O JQuery usado para rolar para a div relevante:
function scrollToID(id, speed) {
var offSet = 70;
var obj = $(id).offset();
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
Se alguém puder ajudar a encontrar uma solução viável para poder chamar esses IDs de uma página diferente, isso seria ótimo.