j'ai donc une page qui a une barre de liens fixe sur le côté. Je voudrais faire défiler les différents divs. Fondamentalement, la page n'est qu'un long site Web, où je voudrais faire défiler les différentes divisions en utilisant la boîte de menu sur le côté.
Voici le jquery que j'ai jusqu'à présent
$(document).ready(function() {
$('#contactlink').click = function() {
$(document).scrollTo('#contact');
}
});
Le problème est qu'il va automatiquement à la division de contact lors du chargement, puis lorsque j'appuie sur #contactlinkdans le menu, il revient en haut.
MODIFIER: 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
Réponses:
Tout d'abord, votre code ne contient pas de
contactdiv, il a uncontactsdiv!Dans la barre latérale, vous avez
contactdans la div en bas de la page que vous avezcontacts. J'ai supprimé la finalesde l'exemple de code. (vous avez également mal orthographié l'projectslinkID dans la barre latérale).Deuxièmement, jetez un oeil à certains des exemples pour cliquer sur la page de référence jQuery. Vous devez utiliser click like,
object.click( function() { // Your code here } );afin de lier un gestionnaire d'événements click à l'objet .... Comme dans mon exemple ci-dessous. En passant, vous pouvez également simplement déclencher un clic sur un objet en l'utilisant sans arguments, commeobject.click().Troisièmement,
scrollToest un plugin dans jQuery. Je ne sais pas si vous avez installé le plugin. Vous ne pouvez pas utiliserscrollTo()sans le plugin. Dans ce cas, la fonctionnalité que vous désirez n'est que de 2 lignes de code, donc je ne vois aucune raison d'utiliser le plugin.Ok, passons maintenant à une solution.
Le code ci-dessous défilera jusqu'à la div correcte si vous cliquez sur un lien dans la barre latérale. La fenêtre doit être suffisamment grande pour permettre le défilement:
Exemple en direct
(Faites défiler jusqu'à la fonction prise à partir d' ici )PS: Évidemment, vous devriez avoir une raison impérieuse d'emprunter cette voie au lieu d'utiliser des balises d'ancrage
<a href="#gohere">blah</a>...<a name="gohere">blah title</a>la source
Il n'y a pas de
.scrollTo()méthode dans jQuery, mais il y en a.scrollTop()une..scrollTopattend un paramètre, c'est-à-dire la valeur en pixels vers laquelle la barre de défilement doit défiler.Exemple:
fera défiler la fenêtre (si elle contient suffisamment de contenu).
Vous pouvez donc obtenir cette valeur souhaitée avec
.offset()ou.position().Exemple:
Cela devrait faire défiler l'
#contactélément en vue.La méthode alternative non jQuery est
.scrollIntoView(). Vous pouvez appeler cette méthodeDOM elementcomme:trueindique que l'élément est positionné en haut alorsfalsequ'il le placerait en bas de la vue. La bonne chose avec la méthode jQuery est que vous pouvez même l'utiliser avecfx functionslike.animate(). Vous pouvez donc faire défiler quelque chose en douceur.Référence: .scrollTop () , .position () , .offset ()
la source
tu peux essayer :
la source
Ajoutez cette petite fonction et utilisez-la comme suit:
$('div').scrollTo(500);la source
OK les gars, c'est une petite solution, mais ça marche bien.
supposons le code suivant:
vous voulez quand un nouveau message est ajouté à 'the_div_holder' puis il fait défiler son contenu interne (le .post du div) jusqu'au dernier comme un chat. Donc, faites ce qui suit chaque fois qu'un nouveau .post est ajouté au support div principal:
la source
Commencez par obtenir la position de l'élément div jusqu'à laquelle vous souhaitez faire défiler par la méthode jQuery position ().
Exemple: var pos = $ ("div"). Position ();
Ensuite, obtenez les coordonnées y (hauteur) de cet élément avec la méthode " .top ".
Exemple: pos.top;
Obtenez ensuite les coordonnées x de l'élément div avec la méthode " .left ".
Ces méthodes proviennent du positionnement CSS.
Une fois que nous obtenons les coordonnées x et y, nous pouvons alors utiliser scrollTo () de javascript ; méthode.
Cette méthode fait défiler le document jusqu'à une hauteur et une largeur spécifiques.
Il prend deux paramètres en tant que coordonnées x et y. Syntaxe: window.scrollTo (x, y);
Ensuite, passez simplement les coordonnées x et y de l'élément DIV dans la fonction scrollTo () .
Reportez-vous à l'exemple ci-dessous ↓ ↓
la source
Pas besoin de ça aussi. Ajoutez simplement div id à href d'une balise <a>
Juste comme ça.
la source