Scrollen Sie mit jquery zu einem div

205

Ich habe also eine Seite mit einer festen Linkleiste an der Seite. Ich möchte zu den verschiedenen Divs scrollen. Grundsätzlich ist die Seite nur eine lange Website, auf der ich über das Menüfeld zur Seite zu verschiedenen Divs scrollen möchte.

Hier ist die Frage, die ich bisher habe

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

Das Problem ist, dass es beim Laden automatisch zum Kontakt-Div wechselt. Wenn ich dann #contactlinkim Menü auf drücke , wird ein Bildlauf nach oben durchgeführt.

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

Danke für die Hilfe

jquery scroll tshauck
quelle
Wie sieht das HTML aus, wo sich der Kontaktlink befinden soll?
James Black
Dies kann ein Duplikat von stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery
James Black
3
Gibt es einen Grund, warum Sie jQuery anstelle von einfachen alten Ankern verwenden?
Brianpeiris
2
@ James - Das ist nicht wirklich ein Duplikat. Diese Frage führt eine Seite zu bestimmten Divs. Diese Frage scrollt eine Seite in definierten Schritten (unabhängig davon, welche Divs angezeigt werden).
Peter Ajtai
Das ist wirklich gut: css-tricks.com/snippets/jquery/smooth-scrolling . Hat für mich gearbeitet.
Maahd

Antworten:

342

Erstens enthält Ihr Code kein contactDiv, sondern ein contactsDiv!

In der Seitenleiste haben Sie contactin der div am Ende der Seite, die Sie haben contacts. Ich habe das Finale sfür das Codebeispiel entfernt. (Sie haben auch die projectslinkID in der Seitenleiste falsch geschrieben ).

Schauen Sie sich zweitens einige Beispiele an, um auf die jQuery-Referenzseite zu klicken . Sie müssen click like verwenden, object.click( function() { // Your code here } );um einen click event handler an das Objekt zu binden .... Wie in meinem Beispiel unten. Nebenbei können Sie auch einfach einen Klick auf ein Objekt auslösen, indem Sie es ohne Argumente verwenden, wie z object.click().

Drittens scrollToist ein Plugin in jQuery. Ich weiß nicht, ob Sie das Plugin installiert haben. Sie können nicht scrollTo()ohne das Plugin verwenden. In diesem Fall ist die gewünschte Funktionalität nur 2 Codezeilen, daher sehe ich keinen Grund, das Plugin zu verwenden.

Ok, jetzt zu einer Lösung.

Der folgende Code führt zum richtigen Div, wenn Sie auf einen Link in der Seitenleiste klicken. Das Fenster muss groß genug sein, um einen Bildlauf zu ermöglichen:

// 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-Beispiel

(Scrollen Sie zur Funktion von hier )

PS: Natürlich sollten Sie einen zwingenden Grund haben, diesen Weg zu gehen, anstatt Ankertags zu verwenden <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

Peter Ajtai
quelle
Ich bin froh zu wissen, dass es geholfen hat, aber ich denke, du meinst "Gurke", obwohl ich finde, dass es besser ist, sie zu essen, als aus ihnen herauszukommen.
Peter Ajtai
Beim ersten Klicken wird nicht gescrollt. : / Ich klicke es zum zweiten Mal und es funktioniert.
Burak Karakuş
Ich denke, es ist logischer, die ID wie folgt
Gino
es funktioniert beim ersten mal nicht. Aber wenn wir das zweite Mal klicken, funktioniert es perfekt.
Satish Singh
115

.scrollTo()In jQuery gibt es keine Methode, aber .scrollTop()eine. .scrollToperwartet einen Parameter, dh den Pixelwert, zu dem die Bildlaufleiste scrollen soll.

Beispiel:

$(window).scrollTop(200);

wird durch das Fenster scrollen (wenn es genügend Inhalt enthält).

So können Sie diesen gewünschten Wert mit .offset()oder erhalten .position().

Beispiel:

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

Dies sollte das #contactElement in die Ansicht scrollen .

Die alternative Methode ohne jQuery ist .scrollIntoView(). Sie können diese Methode DOM elementwie folgt aufrufen :

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

trueGibt an, dass das Element oben positioniert ist, während falsees unten in der Ansicht platziert wird. Das Schöne an der jQuery-Methode ist, dass Sie sie sogar mit fx functionslike verwenden können .animate(). Sie können also etwas glatt scrollen.

Referenz: .scrollTop () , .position () , .offset ()

jAndy
quelle
Ich fürchte, ich habe immer noch ähnliche Probleme. Das Laden der Seite wurde um einen bestimmten Betrag auf der Seite nach unten gescrollt, nicht der Kontaktbereich, und der Link führt mich auch nicht zum Kontaktbereich. Danke tho. EDIT: Sagen wir, ich beabst die Divs mit Top mit CSS. Würde dies dazu führen, dass sie an die falsche Stelle gehen? Nur ein Gedanke.
Tshauck
22

Du kannst es versuchen : 

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

Fügen Sie diese kleine Funktion hinzu und verwenden Sie sie wie folgt: $('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
quelle
6

OK Leute, das ist eine kleine Lösung, aber es funktioniert gut.

Angenommen, der folgende Code:

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

Wenn ein neuer Beitrag zu 'the_div_holder' hinzugefügt werden soll, wird der innere Inhalt (der .post des div) wie ein Chat zum letzten gescrollt. Gehen Sie also wie folgt vor, wenn ein neuer .post zum Haupt-Div-Halter hinzugefügt wird:

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
quelle
3

Ermitteln Sie zuerst die Position des div-Elements, bis zu dem Sie mit der Methode jQuery position () scrollen möchten.
Beispiel: var pos = $ ("div"). Position ();
Ermitteln Sie dann die y-Koordinaten (Höhe) dieses Elements mit der Methode " .top ".
Beispiel: pos.top;
Dann erhalten Sie die x-Koordinaten des div-Elements mit der Methode " .left ".
Diese Methoden stammen aus der CSS-Positionierung.
Sobald wir x & y-Koordinaten erhalten haben, können wir scrollTo () von Javascript verwenden. Methode.
Diese Methode scrollt das Dokument bis zu einer bestimmten Höhe und Breite.
Es werden zwei Parameter als x & y-Koordinaten verwendet. Syntax: window.scrollTo (x, y);
Übergeben Sie dann einfach die x & y-Koordinaten des DIV-Elements in der Funktion scrollTo () .
Siehe das folgende Beispiel ↓ ↓

<!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
quelle
Und Heu füge eine Texterklärung hinzu, was du getan hast, nur das macht nicht viel Sinn .. !!
Clain Dsilva
Wie @ClainDsilva sagte, fügen Sie bitte eine Texterklärung hinzu.
SreekanthGS
-1

Keine Notwendigkeit auch diese. Fügen Sie einfach die div-ID zu href eines <a Tag-Tags hinzu

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

Genau so.

Armin Akhlagh
quelle
Bitte werfen Sie mehr Licht darauf. Bei mir hat es nicht funktioniert.
Ifesinachi Bryan