Faites défiler jusqu'à un div en utilisant jquery

176

afin que j'ai une page qui a une barre de liaison fixe sur le côté. J'aimerais faire défiler les différents divs. Fondamentalement, la page est juste un long site Web, où je voudrais faire défiler les différentes divs en utilisant la boîte de menu sur le côté. Voici le jquery je jusqu'à présentFaites défiler jusqu'à un div en utilisant jquery

$(document).ready(function() { 

$('#contactlink').click = function(){ 
    $(document).scrollTo('#contact'); 
} 

});

Le problème est qu'il va automatiquement à la div de contact lors de son chargement, puis quand je presse la #contactlink dans le menu il défile vers le haut.

EDIT: HTML

<!DOCTYPE html> 

<html lang="en"> 

    <head> 
    <meta charset="utf-8"> 

    <!-- jQuery--> 
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script> 

    <!-- .js file--> 
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script> 

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />  

    <!-- .css for page --> 
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>      

    <!-- page title--> 
    <title><!-- Insert Title --></title> 


</head> 
<body> 
    <div id="container"> 

     <div id="sidebar"> 
      <ul> 
       <li><a id = "aboutlink" href="#">auck</a></li> 
       <li><a id = "peojectslink" href="#">Projects</a></li> 
       <li><a id = "resumelink" href="#">Resume</a></li> 
       <li><a id = "contactlink" href="#">Contact</a></li> 
      </ul> 
     </div> 

     <div id="content"> 
      <div class="" id="about"> 
       <p class="header">uck</p> 
       <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
      </div> 
      <div class="sections"id="projects"> 
       <p class = "header">Projects</p> 
       <p class="info">Projects</p> 
      </div> 
      <div class="sections" id="resume"> 
       <p class = "header">Resume</p> 
       <p class="info">Resume</p> 
      </div> 
      <div class="sections" id="contacts"> 
       <p class = "header">Contact</p> 
       <p class="info">Contact</p> 
      </div> 
     </div> 



    </div> 
</body>

Merci pour l'aide

Source

2010-08-08 tshauck

Qu'est-ce que le code html pour ressembler où le lien de contact devrait être? –

Cela peut être un doublon de http: // stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery –

Y at-il une raison pour laquelle vous utilisez jQuery au lieu de vieilles ancres simples? – brianpeiris

295

Tout d'abord, votre code ne contient pas de contact div, il a une contacts div!

Dans la barre latérale vous avez contact dans le div au bas de la page que vous avez contacts. J'ai enlevé le final s pour l'exemple de code. (vous avez également mal orthographié l'ID projectslink dans la barre latérale). Ensuite, jetez un oeil à quelques exemples de click sur la page de référence de jQuery. Vous devez utiliser click like, object.click(function() { // Your code here }); afin de lier un gestionnaire d'événement click à l'objet .... Comme dans mon exemple ci-dessous. En aparté, vous pouvez également déclencher un clic sur un objet en l'utilisant sans arguments, comme object.click().

Troisièmement, scrollTo est un plugin dans jQuery. Je ne sais pas si vous avez installé le plugin.Vous ne pouvez pas utiliser scrollTo() sans le plugin. Dans ce cas, la fonctionnalité que vous désirez est seulement 2 lignes de code, donc je ne vois aucune raison d'utiliser le plugin.

Ok, maintenant à une solution.

Le code ci-dessous défilera vers la div correcte si vous cliquez sur un lien dans la barre latérale. La fenêtre ne doit être assez grand pour permettre le défilement:

// This is a functions that scrolls to #{blah}link 
function goToByScroll(id){ 
     // Remove "link" from the ID 
    id = id.replace("link", ""); 
     // Scroll 
    $('html,body').animate({ 
     scrollTop: $("#"+id).offset().top}, 
     'slow'); 
} 

$("#sidebar > ul > li > a").click(function(e) { 
     // Prevent a page reload when a link is pressed 
    e.preventDefault(); 
     // Call the scroll function 
    goToByScroll(this.id);   
});

Live Example

~~(Atteignez la fonction prise de here)~~

PS: Il est évident que vous devriez avoir une raison impérieuse pour emprunter cette route au lieu d'utiliser des marques d'ancrage <a href="#gohere">blah</a> ... <a name="gohere">blah title</a>

Source

2010-08-08 01:17:13

Heureux de savoir que cela a aidé, mais je pense que vous voulez dire "cornichon", même si je trouve qu'il est préférable de les manger que d'en sortir. –

Le lien de référence est mort – evanmcd

Il ne défile pas au premier clic. :/Je clique une seconde fois et ça marche. –

Il n'y a pas de méthode .scrollTo() dans jQuery, mais il y a un .scrollTop() un. .scrollTop attend un paramètre, c'est-à-dire la valeur de pixel à laquelle la barre de défilement doit faire défiler.

Exemple:

$(window).scrollTop(200);

défilera la fenêtre (s'il y a assez de contenu en elle). Vous pouvez obtenir cette valeur souhaitée avec .offset() ou .position().

Exemple:

$(window).scrollTop($('#contact').offset().top);

Cela devrait faire défiler l'élément #contact en vue.

La méthode alternative non-jQuery est .scrollIntoView(). Vous pouvez appeler cette méthode sur tout DOM element comme:

$('#contact')[0].scrollIntoView(true);

true indique que l'élément est positionné en haut alors que false placerait sur le fond de la vue. La bonne chose avec la méthode jQuery est, vous pouvez même l'utiliser avec fx functions comme .animate(). Ainsi, vous pourriez faire défiler quelque chose en douceur.

Référence: .scrollTop(), .position(), .offset()

Source

2010-08-08 01:02:53 jAndy

J'ai bien peur d'avoir encore des problèmes similaires. La page charge un certain montant sur la page, et non le contact, et le lien ne m'amène pas au contact div non plus. Merci, merci. EDIT: dis que j'écarte les divs en utilisant top avec css, est-ce que ça ferait que ça se passe au mauvais endroit? Juste une pensée. – tshauck

Ajouter cette petite fonction et l'utiliser comme ceci: $('div').scrollTo(500);

jQuery.fn.extend(
{ 
    scrollTo : function(speed, easing) 
    { 
    return this.each(function() 
    { 
     var targetOffset = $(this).offset().top; 
     $('html,body').animate({scrollTop: targetOffset}, speed, easing); 
    }); 
    } 
});

Source

2010-08-08 02:27:07 Ryan

OK les gars, c'est une petite solution, mais il fonctionne très bien.

suppose que le code suivant:

<div id='the_div_holder' style='height: 400px; overflow-y: scroll'> 
    <div class='post'>1st post</div> 
    <div class='post'>2nd post</div> 
    <div class='post'>3rd post</div> 
</div>

vous voulez, quand un nouveau poste est ajouté à « the_div_holder » il fait défiler son contenu intérieur (le .post du div) à la dernière comme une conversation. Donc, procédez comme suit chaque fois qu'un nouveau .post est ajouté au principal support div:

var scroll = function(div) { 
    var totalHeight = 0; 
    div.find('.post').each(function(){ 
     totalHeight += $(this).outerHeight(); 
    }); 
    div.scrollTop(totalHeight); 
    } 
    // call it: 
    scroll($('#the_div_holder'));

Source

2013-03-20 01:58:47 christian

vous pouvez essayer:

$("#MediaPlayer").ready(function(){ 
    $("html, body").delay(2000).animate({ 
     scrollTop: $('#MediaPlayer').offset().top 
    }, 2000); 
});

Source

2014-08-25 14:03:19

d'abord obtenir la position de l'élément div jusqu'à laquelle tu veux faire défiler par la méthode jQuery position().
Exemple: var pos = $ ("div"). Position();
Puis obtenez les coordonnées (hauteur) de cet élément avec la méthode ".top".
Exemple: pos.top;
Récupérez ensuite les x coïncidences de l'élément div avec la méthode ".left".
Ces méthodes proviennent du positionnement CSS.
Une fois que nous obtenons x & y cordinates, alors nous pouvons utiliser de javascript scrollTo(); méthode.
Cette méthode fait défiler le document jusqu'à une hauteur spécifique & largeur.
Il prend deux paramètres comme x & y cordinates. Syntaxe: window.scrollTo (x, y);
Ensuite, il suffit de passer les x & y cordinates de l'élément DIV dans la fonction scrollTo(). Reportez-vous
l'exemple ci-dessous ↓ ↓

<!DOCTYPE HTML> 
    <html> 
    <head> 
     <title> 
      Scroll upto Div with jQuery. 
     </title> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
     <script> 
      $(document).ready(function() { 
       $("#button1").click(function() { 
        var x = $("#element").position(); //gets the position of the div element... 
        window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position.... 
        //it takes 2 parameters : (x axis cordinate, y axis cordinate); 
       }); 
      }); 
      </script> 
    </head> 
    <body> 
     <button id="button1"> 
      Click here to scroll 
     </button> 

     <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;"> 
      The DIV element. 
      </div> 
     </body> 
    </html>

Source

2015-04-26 06:41:11

Et hay ajouter une explication de texte de ce que vous avez fait, juste le n'a pas beaucoup de sens .. !! –

Comme l'a dit @ClainDsilva, veuillez ajouter quelques explications textuelles. – SreekanthGS

Faites défiler jusqu'à un div en utilisant jquery

Répondre

Questions connexes