Contexte de la question:
J'ai un site web de 2 pages. Les deux pages utilisent la même page masterlayout.cshtml qui comporte une barre de navigation. La barre de navigation contient un certain nombre de liens qui défilent vers les divs pertinents de la première page en fonction de leurs identifiants.
Le problème:
Lorsque j'accède à la deuxième page, je ne peux plus rediriger les divs spécifiés à partir des liens de la barre de navigation sur la première page. Cela a du sens car l’attention n’est plus sur la première page, mais comment puis-je contourner ce problème?
Code:
Voici le code de la barre de navigation avec l'identifiant de div défini, notez les attributs data-id
spécifiant le div auquel faire défiler:
<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>
Exemple de div qui défile vers:
<div id="Welcome">
//HTML
</div>
JQuery avait l'habitude de faire défiler jusqu'à la div correspondante:
function scrollToID(id, speed) {
var offSet = 70;
var obj = $(id).offset();
var targetOffset = $(id).offset().top - offSet;
$('html,body').animate({ scrollTop: targetOffset }, speed);
}
Si quelqu'un pouvait aider à trouver une solution viable pour pouvoir appeler ces identifiants depuis une page différente, ce serait formidable.
Cela peut être fait avec des cookies. Définissez un cookie avec id
que vous souhaitez faire défiler, puis, lorsque la nouvelle page est chargée, lisez le cookie et accédez à la variable définie id
. J'ai utilisé le très populaire plugin jquery-cookie .
Voici le code 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);
}
}
});
J'ai préparé ici un exemple minimal avec ce travail:
http://plnkr.co/edit/l2aassM4biyNRWNCrvU?p=preview
Remarque: Cliquez sur Events
pour naviguer vers une autre page.
Vous pouvez suivre le hash de la page et faire défiler la page pour div
<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);
}
Si je comprends ce que tu veux dire. Alors vous pouvez simplement faire ceci comme un iFrame . Dans la barre de navigation pour chaque onglet, il suffit de mettre un href='#welcome'
ou href='#features'
et de donner à iFrame pour welcome
une ID
de welcome
. Lorsque vous cliquez sur l'onglet pour welcome
. Vous serez envoyé à l'iFrame avec le contenu welcome
. Pour features
faire les mêmes et tous les onglets suivants.
Le moyen le plus simple est de créer une autre barre de navigation pour une autre page à partir de laquelle vous souhaitez rediriger vos utilisateurs finaux
essaye ça:
créer un fichier first.php ou 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>
Puis deuxième fichier avec barre de navigation différente
<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>
Je suppose que vous pouvez utiliser $.cookie
chaque fois que vous faites défiler la première page.
Par exemple :
$(document).ready(function()
{
$('.scroll-link').on("click",function()
{
$.cookie('page',$(this).attr('data-id'));
});
if($.cookie('page') != null || $.cookie('page') != "")
{
scrollToID($.cookie('page'), 1000);
}
})
Comment redirigez-vous vers une autre page, en utilisant la valeur href
?
Si c'est le cas, ajoutez également data-id
pour cette balise <a>
également.
Ainsi, lorsque vous cliquez sur le lien Evénements, il se dirigera vers une autre page HTML et vous souhaitez faire défiler jusqu'à Evénements div, n'est-ce pas?
Ensuite, en utilisant sessionStorage
, vous pouvez stocker et récupérer l'id de la page, puis faire défiler jusqu'à son div spécifique.
Ajoutez le script ci-dessous et voyons.
$(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);
}
<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>
Vous pouvez essayer quelque chose comme ça. J'ai changé data-id en id. Vous pouvez utiliser 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 à faire défiler
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 [];
}
Vous pouvez envoyer l'ID du div que vous souhaitez faire défiler vers la deuxième page via une chaîne de requête d'URL et écrire un script (dans la page 2) pour lire l'URL et faire défiler jusqu'au div spécifié . gâteau.