web-dev-qa-db-fra.com

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

donc j'ai une page qui a une barre de lien fixe sur le côté. Je voudrais faire défiler les différents divs. Fondamentalement, la page n’est qu’un long site Web, dans lequel je voudrais faire défiler les différents divs en utilisant la boîte de menu située sur le côté.

Voici le jquery que j'ai jusqu'ici

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

Le problème est qu’il se connecte automatiquement au contact div lorsqu’il se charge, puis lorsque j’appuie sur #contactlink dans le menu, il revient au début.

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

jqueryscroll
193
tshauck

Premièrement, votre code ne contient pas un contact div, il a un contacts div!

Dans l'encadré, vous avez contact dans la section div en bas de la page, vous avez contacts. J'ai supprimé le s final pour l'exemple de code. (vous avez également mal orthographié l’identifiant projectslink dans la barre latérale).

Deuxièmement, jetez un oeil à quelques exemples pour 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énements click à l'objet .... Comme dans mon exemple ci-dessous. En passant, vous pouvez aussi simplement cliquer 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 le plugin installé. 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, je ne vois donc aucune raison d’utiliser le plug-in.

Ok, passons maintenant à une solution.

Le code ci-dessous défilera jusqu'au bon div 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 de ici )

PS: Évidemment, vous devriez avoir une raison impérieuse d’aller dans cette voie au lieu d’utiliser des balises d’ancrage <a href="#gohere">blah</a> ... <a name="gohere">blah title</a>

331
Peter Ajtai

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

Exemple:

$(window).scrollTop(200);

fera défiler la fenêtre (s’il contient suffisamment de contenu).

Vous pouvez ainsi obtenir cette valeur souhaitée avec .offset() ou .position().

Exemple:

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

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

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

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

true indique que l'élément est positionné en haut alors que false le placerait en bas de la vue. Le bon côté de la méthode jQuery est que vous pouvez même l’utiliser avec fx functions comme .animate(). Donc, vous pouvez faire défiler en douceur quelque chose.

Référence: . ScrollTop () , . Position () , . Offset ()

109
jAndy

tu peux essayer :

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

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);
    });
  }
});
12
Ryan

OK les gars, ceci est une petite solution, mais cela fonctionne 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', alors il fait défiler son contenu intérieur (le .post du div) jusqu'au dernier comme un chat. Donc, procédez comme suit chaque fois qu'un nouveau fichier .post est ajouté au titulaire principal de la 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'));
6
christian

Commencez par obtenir la position de l’élément div jusqu’à ce que vous souhaitiez faire défiler la méthode jQuery position ().
Exemple : var pos = $ ("div"). position ();
Puis obtenez les y cordinates (hauteur) de cet élément avec ".Haut" méthode.
Exemple: pos.top;
Puis obtenez les x coordonnées de l'élément div avec ".la gauche" méthode.
Ces méthodes proviennent du positionnement CSS.
Une fois que nous obtenons les coordonnées x et y, nous pouvons utiliser les scripts javascript. scrollTo (); méthode.
Cette méthode fait défiler le document jusqu'à une hauteur et une largeur spécifiques.
Il faut deux paramètres en tant que coordonnées x et y. Syntaxe: window.scrollTo (x, y);
Il suffit ensuite de passer les coordonnées x et y de l'élément DIV dans le scrollTo () une fonction.
Voir 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>
3
Sayyed Salman

Pas besoin aussi ceux-ci. Ajoutez simplement simplement div id à href d’une balise <a>

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

Juste comme ça.

0
Armin Akhlagh