jquery - lento - ¿Redirigir a un div en una página diferente con desplazamiento suave?
scroll suave css (8)
Antecedentes de la pregunta:
Tengo un sitio web de 2 páginas. Ambas páginas utilizan la misma página masterlayout.cshtml que presenta una barra de navegación. Dentro de la barra de navegación hay una serie de enlaces que se desplazan hacia abajo hasta los divs relevantes en la página uno según sus ID.
La cuestión:
Cuando accedo a la segunda página ya no puedo redireccionar a los divs especificados desde los enlaces de la barra de navegación en la primera página. Esto tiene sentido ya que el enfoque ya no está en la primera página, pero ¿cómo puedo solucionar este problema?
Código:
Aquí está el código de la barra de navegación con el conjunto de id de div, tenga en cuenta los atributos de data-id que especifican en qué div se desplazará a:
<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>
Ejemplo de un div que se desplaza a:
<div id="Welcome">
//HTML
</div>
El JQuery solía desplazarse hasta el 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);
}
Si alguien puede ayudar a encontrar una solución viable para poder llamar a estos identificadores desde una página diferente, sería genial.
¿Cómo redireccionar a otra página, usando el valor href ?
Si es así, agregue también data-id para esta etiqueta <a> .
Entonces, al hacer clic en el enlace Eventos, irá a otra página html y desea desplazarse a la div. Eventos, ¿verdad?
Luego, utilizando sessionStorage , puede almacenar y recuperar la identificación de la página, luego desplazarse a su div específico.
Agregue el siguiente script y veamos.
JQUERY
$(document).ready(function(){
// get sessionStorage for page id
var get_id = sessionStorage.getItem(''pg_id'');
// check page id, then scroll to its div
if(get_id)
scrollToID(get_id, 300);
// click event to scroll to div
$(''.nav li a'').on(''click'', function(){
var id = ''#''+$(this).data(''id'');
sessionStorage.setItem(''pg_id'', id);
scrollToID(id, 300);
});
});
function scrollToID(id, speed) {
var offSet = 70;
var obj = $(id).offset();
var targetOffset = $(id).offset().top - offSet;
$(''html,body'').animate({ scrollTop: targetOffset }, speed);
}
HTML (Mi muestra)
<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=''page2.html'' data-id="Event">Events</a></li>
<!-- use your script to redirect to another page, but add "data-id" -->
</ul>
Esto se puede hacer con cookies. Configuración de una cookie con la id que desea desplazar, y luego, cuando se carga la nueva página, lea la cookie y desplácese hasta la id definida. Utilicé el muy popular plugin jquery-cookie .
Aquí está el código de JavaScript:
$(document).ready(function () {
// Read the cookie and if it''s defined scroll to id
var scroll = $.cookie(''scroll'');
if(scroll){
scrollToID(scroll, 1000);
$.removeCookie(''scroll'');
}
// Handle event onclick, setting the cookie when the href != #
$(''.nav a'').click(function (e) {
e.preventDefault();
var id = $(this).data(''id'');
var href = $(this).attr(''href'');
if(href === ''#''){
scrollToID(id, 1000);
}else{
$.cookie(''scroll'', id);
window.location.href = href;
}
});
// scrollToID function
function scrollToID(id, speed) {
var offSet = 70;
var obj = $(''#'' + id);
if(obj.length){
var offs = obj.offset();
var targetOffset = offs.top - offSet;
$(''html,body'').animate({ scrollTop: targetOffset }, speed);
}
}
});
Aquí he preparado un ejemplo mínimo con este trabajo:
http://plnkr.co/edit/l2aassM4biyNRWNCrvUz?p=preview
Nota: Haga clic en Events para navegar a la otra página.
La forma más sencilla es crear otra barra de navegación para otra página desde la que desea redirigir a sus usuarios finales
prueba esto:
crear un archivo first.php o first.html
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
.t{
min-height: 200px;
border: 2px solid;
}
</style>
<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>
<div id = ''Welcome'' class="t">
</div>
<div id = ''features'' class="t">
</div>
<div id = ''About''class="t">
</div>
<div id = ''Location'' class="t">
</div>
<div id =''div_101'' class="t">
scroll upto here
</div>
<script>
function getParameterByName(name) {
name = name.replace(/[/[]/, "//[").replace(/[/]]/, "//]");
var regex = new RegExp("[//?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(//+/g, " "));
}
$(document).ready(function(){
var param_scroll = getParameterByName(''id'');
if(param_scroll){
$(''html, body'').animate({
scrollTop: $("#"+param_scroll).offset().top
}, 3000);
}
});
</script>
Luego segundo archivo con diferente barra de navegación
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="first_page.php?id=Welcome" class="scroll-link" data-id="Welcome">Welcome</a></li>
<li><a href="first_page.php?id=features" class="scroll-link" data-id="features">Club</a></li>
<li><a href="first_page.php?id=About" class="scroll-link" data-id="About">About Us</a></li>
<li><a href="first_page.php?id=Location" class="scroll-link" data-id="Location">Location</a></li>
<li><a href=''@Url.Action("FutureEvents", "Events", new { pageNo = 1 })''>Events</a></li>
</ul>
</div>
Puede enviar el ID del div, al que desea desplazarse, a la segunda página a través de una cadena de consulta de URL y escribir un script (en la página 2) para leer la URL y desplazarse al div especificado. Pedazo de pastel.
Puede realizar un seguimiento del hash de la URL de la página y desplazarse de la página a un div en particular
<a href="#Welcome" class="scroll-link">Welcome</a>
<a href="your_page_url#Welcome" class="other-page">Welcome</a> <!-- link to other page scroll div -->
Jquery
$(document).ready(function(){
var speed = 1000;
// check for hash and if div exist... scroll to div
var hash = window.location.hash;
if($(hash).length) scrollToID(hash, speed);
// scroll to div on nav click
$(''.scroll-link'').click(function (e) {
e.preventDefault();
var id = $(this).attr(''href'');
if($(id ).length) scrollToID(id, speed);
});
})
function scrollToID(id, speed) {
var offSet = 70;
var obj = $(id).offset();
var targetOffset = obj.top - offSet;
$(''html,body'').animate({ scrollTop: targetOffset }, speed);
}
Puedes probar algo como esto. He cambiado ID de datos a ID. Puedes usar javascript.
<ul class="nav navbar-nav">
<li><a href="#" class="scroll-link" onclick="scrollme(this.id)" id="Welcome">Welcome</a></li>
<li><a href="#" class="scroll-link" onclick="scrollme(this.id)" id="features">Club</a></li>
<li><a href="#" class="scroll-link" onclick="scrollme(this.id)" id="About">About Us</a></li>
<li><a href="#" class="scroll-link" onclick="scrollme(this.id)" id="Location">Location</a></li>
<li><a href=''#'' onclick="scrollme(this.id)" id="Event">Events</a></li>
</ul>
Javascript para desplazarse
function scrollme(id)
{
var scrollElem = scrollableElement(''html'', ''body'');
var targetOffset = $(id).offset().top;
$(scrollElem).animate({scrollTop: targetOffset-100}, 1000, function() {
});
}
function scrollableElement(els)
{
for (var i = 0, argLength = arguments.length; i <argLength; i++) {
var el = arguments[i],
$scrollElement = $(el);
if ($scrollElement.scrollTop()> 0) {
return el;
} else {
$scrollElement.scrollTop(1);
var isScrollable = $scrollElement.scrollTop()> 0;
$scrollElement.scrollTop(0);
if (isScrollable) {
return el;
}
}
}
return [];
}
Si entiendo lo que quieres decir. De lo que solo puedes hacer esto es un iFrame. En la barra de navegación de cada pestaña, simplemente coloque un href=''#welcome'' o href=''#features'' y luego dé al iFrame una welcome ID . Al hacer clic en la pestaña de welcome . Se te enviará al iFrame con el contenido de welcome . Para las features haga lo mismo y todas las siguientes pestañas.
Supongo que puede usar $.cookie cada vez que se desplaza por la primera página.
Por ejemplo :
$(document).ready(function()
{
$(''.scroll-link'').on("click",function()
{
$.cookie(''page'',$(this).attr(''data-id''));
});
if($.cookie(''page'') != null || $.cookie(''page'') != "")
{
scrollToID($.cookie(''page''), 1000);
}
})