Rediriger vers une div sur une page différente avec un défilement lisse?
Question De Fond:
j'ai un site web de 2 pages. Les deux pages utilisent le même masterlayout.cshtml page qui comporte une barre de navigation. A L'intérieur de la barre de navigation, il y a un certain nombre de liens qui défilent vers les divs de la première page en fonction de leur ID.
La Question:
lorsque j'accède à la deuxième page je ne peux plus rediriger vers les divs spécifiés à partir des liens Navbar sur la première page. Ce sens que l'accent n'est plus sur la première page, mais comment puis-je résoudre ce problème?
Code:
voici le code Navbar avec l'id de div défini, notez le data-id attributs spécifiant à quel div faire défiler vers:
<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 équivaut à:
<div id="Welcome">
//HTML
</div>
JQuery utilisé pour faire Défiler jusqu'à la div:
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 peut aider avec à venir avec une solution viable pour pouvoir appeler ces id à partir d'un une autre page qui serait super.
8 réponses
ceci peut être fait avec des cookies. Configurer un cookie avec id vous voulez faire défiler, et puis, quand la nouvelle page est chargée, lire le cookie et défiler à défini id. J'ai utilisé le plugin très populaire 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);
}
}
});
Ici, j'ai préparé un exemple minimal avec cette de travail:
http://plnkr.co/edit/l2aassM4biyNRWNCrvUz?p=preview
Note: cliquez sur Events à la valeur liquidative de l'autre page.
vous pouvez suivre le hachage de l'url de la page et faire défiler la page vers div particulier
<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);
}
Vous pouvez essayer quelque chose comme cela. J'ai changé l'id des données 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 pour 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 [];
}
comment rediriger vers une autre page, en utilisant href valeur?
Si oui, y ajouter data-id de cette <a> balise trop.
Ainsi, lorsque vous cliquez sur le lien événements, il ira à une autre page html et vous voulez faire défiler vers Events div, Non?
puis en utilisant sessionStorage, vous pouvez stocker et récupérer l'id de la page, puis faire défiler vers sa div spécifique.
ajouter le script ci-dessous et voyons voir.
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 (My de l'échantillon)
<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>
si je comprends ce que vous voulez dire. Que vous pouvez tout simplement faire ce qu'un iFrame.
Dans la barre de navigation pour chaque onglet il suffit de mettre un href='#welcome' ou href='#features' et donner l'iFrame pour welcomeIDwelcome. Lorsque vous cliquez sur l'onglet welcome. Vous serez envoyé à l'iFrame avec le welcome contenu. features faire la même chose et tous les onglets suivants.
la manière la plus simple est de créer une autre barre de navigation pour les autres pages à partir desquelles vous voulez rediriger vos utilisateurs finaux
essaye ceci:
créer un fichier en premier.php ou premier.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 le deuxième fichier avec la 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 sur 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);
}
})
vous pouvez envoyer L'ID de la div, à laquelle vous voulez faire défiler, à la deuxième page à travers une chaîne de requête URL et écrire un script (en page 2) pour lire L'URL et faire défiler vers la div spécifiée. Morceau de gâteau.