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

205

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

jquery  scroll 
— tshauck
source
À quoi ressemble le HTML pour savoir où doit se trouver le lien de contact?
— James Black
— James Black
3
Y a-t-il une raison pour laquelle vous utilisez jQuery au lieu d'anciennes ancres simples?
— brianpeiris
2
@James - Ce n'est pas vraiment un doublon. Cette question fait défiler une page vers des divisions spécifiques. Cette question fait défiler une page par incréments définis (indépendamment des divs affichés).
— Peter Ajtai
C'est vraiment bien: css-tricks.com/snippets/jquery/smooth-scrolling . A travaillé pour moi.
— maahd

Réponses:

342

Tout d'abord, votre code ne contient pas de contactdiv, il a un contactsdiv!

Dans la barre latérale, vous avez contactdans la div en bas de la page que vous avez contacts. J'ai supprimé la finale sde 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, comme object.click().

Troisièmement, scrollToest 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 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:

// 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);
});

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>

— Peter Ajtai
source
Heureux de savoir que cela a aidé, mais je pense que vous voulez dire "cornichons", même si je trouve qu'il vaut mieux les manger que d'en sortir.
— Peter Ajtai
Il ne défile pas au premier clic. : / Je clique dessus une deuxième fois et ça marche.
— Burak Karakuş
Je pense qu'il est plus logique de mettre l'ID à l'href comme ceci: href = « # A propos de » jsfiddle.net/onigetoc/w5muyern
— Gino
cela ne fonctionne pas du premier coup. mais quand on clique sur la 2ème fois alors son travail parfaitement
— Satish Singh
115

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:

$(window).scrollTop(200);

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:

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

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

La méthode alternative non jQuery est .scrollIntoView(). Vous pouvez appeler cette méthode DOM elementcomme:

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

trueindique que l'élément est positionné en haut alors falsequ'il le placerait en bas de la vue. La bonne chose avec la méthode jQuery est que vous pouvez même l'utiliser avec fx functionslike .animate(). Vous pouvez donc faire défiler quelque chose en douceur.

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

— jAndy
source
J'ai peur d'avoir toujours des problèmes similaires. Les chargements de page ont fait défiler la page d'un certain montant, pas le contact div tho, et le lien ne m'amène pas non plus au contact div. Merci. EDIT: disons que j'espace les divs en utilisant top avec css, est-ce que cela l'amènerait au mauvais endroit? Juste une pensée.
— tshauck
22

tu peux essayer : 

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

Ajoutez cette petite fonction et utilisez-la comme suit: $('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);
    });
  }
});
— Ryan
source
6

OK les gars, c'est une petite solution, mais ça marche bien.

supposons 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 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:

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

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 ↓ ↓

<!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>
— Sayyed Salman
source
Et foin, ajoutez quelques explications textuelles de ce que vous avez fait, cela n'a pas beaucoup de sens .. !!
— Clain Dsilva
Comme l'a dit @ClainDsilva, veuillez ajouter quelques explications textuelles.
— SreekanthGS
-1

Pas besoin de ça aussi. Ajoutez simplement div id à href d'une balise <a>

<li><a id = "aboutlink" href="#about">auck</a></li>

Juste comme ça.

— Armin Akhlagh
source
S'il vous plaît, jetez plus de lumière là-dessus. Ça n'a pas marché pour moi.
— Ifesinachi Bryan
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.