it-swarm.com.de

Scrollen Sie mit jquery zu einem Div

ich habe also eine Seite mit einer festen Linkleiste an der Seite. Ich möchte zu den verschiedenen Divs blättern. Grundsätzlich handelt es sich bei der Seite nur um eine einzige lange Website, auf der ich mithilfe des seitlichen Menüfelds zu verschiedenen Divs blättern möchte.

Hier ist die Frage, die ich bisher habe

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

Das Problem ist, dass es automatisch zum Kontakt-Div geht, wenn es geladen wird. Wenn ich dann den #contactlink im Menü drücke, scrollt es nach oben.

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

193
tshauck

Erstens enthält Ihr Code kein contact div, sondern ein contacts div!

In der Seitenleiste befindet sich contact im div am unteren Rand der Seite, in der Sie contacts haben. Ich habe das letzte s für das Codebeispiel entfernt. (Sie haben auch die projectslink -ID in der Seitenleiste falsch geschrieben).

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

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

Ok, jetzt zu einer Lösung.

Der folgende Code scrollt zum richtigen Div, wenn Sie auf einen Link in der Seitenleiste klicken. Das Fenster muss groß genug sein, um scrollen zu können:

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

(Blättern Sie zu Funktion aus hier )


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

331
Peter Ajtai

Es gibt keine Methode .scrollTo() in jQuery, aber eine Methode .scrollTop(). .scrollTop erwartet einen Parameter, dh den Pixelwert, zu dem die Bildlaufleiste scrollen soll.

Beispiel:

$(window).scrollTop(200);

das Fenster wird gescrollt (wenn genügend Inhalt vorhanden ist).

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

Beispiel:

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

Dies sollte das #contact -Element in die Ansicht rollen.

Die alternative Nicht-jQuery-Methode ist .scrollIntoView(). Sie können diese Methode auf jedem DOM element wie folgt aufrufen:

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

true gibt an, dass das Element oben positioniert ist, während false es unten in der Ansicht platziert. Das Schöne an der jQuery-Methode ist, dass Sie sie sogar mit fx functions wie .animate() verwenden können. Sie könnten also etwas glatt scrollen.

Referenz: . ScrollTop () , . Position () , . Offset ()

109
jAndy

du kannst es versuchen :

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

Füge diese kleine Funktion hinzu und benutze 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);
    });
  }
});
12
Ryan

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 wird, wird sein innerer Inhalt (der .post des Div) wie in einem Chat zum letzten gescrollt. Gehen Sie folgendermaßen vor, wenn dem Div-Hauptinhaber ein neuer .post 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'));
6
christian

Ermitteln Sie zunächst die Position des div-Elements, bis zu dem Sie einen Bildlauf mit der Methode jQuery position () durchführen möchten.
Beispiel: var pos = $ ("div"). position ();
Dann erhalten Sie die y-Koordinaten (Höhe) dieses Elements mit ".oben" Methode.
Beispiel: pos.top;
Dann erhalten Sie die x-Koordinaten des div-Elements mit ".links" Methode.
Diese Methoden stammen aus der CSS-Positionierung.
Sobald wir die x & y-Koordinaten erhalten haben, können wir Javascript verwenden scrollTo (); Methode.
Mit dieser Methode wird das Dokument auf eine bestimmte Höhe und Breite gescrollt.
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 im scrollTo () Funktion.
Siehe folgendes 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>
3
Sayyed Salman

Nicht nötig auch diese. Fügen Sie einfach div id zu href eines <a> -Tags hinzu

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

Genau so.

0
Armin Akhlagh