web-dev-qa-db-fra.com

Rediriger vers une div sur une autre page avec un défilement régulier?

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.

jqueryhtmltwitter-bootstraprazorsmooth-scrolling
17
user1352057

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.

7
lmgonzalves

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);
}
2
Ashish Bhagat

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.

0
Roy Berris

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>
0
PHP Worm...

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);
    }
})
0
IBAD GORE

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.

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 (mon é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>
0
yeyene

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 [];
}
0
Shafeeque

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.

0
uz4ir