Scorri fino a un div usando jquery

205

quindi ho una pagina che ha una barra di collegamento fissa sul lato. Vorrei scorrere fino ai diversi div. Fondamentalmente la pagina è solo un lungo sito Web, dove vorrei scorrere fino a diversi div utilizzando la casella di menu a lato.

Ecco il jquery che ho finora

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

Il problema è che va automaticamente al div del contatto quando si carica, quindi quando premo #contactlinknel menu scorre di nuovo verso l'alto.

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>

Grazie per l'aiuto

jquery  scroll 
— tshauck
fonte
Che aspetto ha l'html dove dovrebbe trovarsi il link di contatto?
— James Black,
— James Black
3
C'è un motivo per cui stai usando jQuery invece di semplici ancore vecchie?
— brianpeiris,
2
@James - Non è proprio un duplicato. Questa domanda fa scorrere una pagina verso div specifici. Quella domanda scorre una pagina in base a incrementi definiti (indipendentemente da ciò che i div stanno mostrando).
— Peter Ajtai,
Questo è davvero buono: css-tricks.com/snippets/jquery/smooth-scrolling . Ha funzionato per me.
— Maahd,

Risposte:

342

Innanzitutto, il tuo codice non contiene un contactdiv, ha un contactsdiv!

Nella barra laterale hai contactil div in fondo alla pagina che hai contacts. Ho rimosso la finale sper l'esempio di codice. (hai anche scritto erroneamente l' projectslinkid nella barra laterale).

In secondo luogo, dai un'occhiata ad alcuni esempi per fare clic sulla pagina di riferimento di jQuery. Devi usare click like, object.click( function() { // Your code here } );per associare un gestore di eventi click all'oggetto .... Come nel mio esempio qui sotto. Per inciso, puoi anche innescare un clic su un oggetto utilizzandolo senza argomenti, come object.click().

Terzo, scrollToè un plugin in jQuery. Non so se hai installato il plugin. Non puoi usare scrollTo()senza il plugin. In questo caso, la funzionalità che desideri è solo 2 righe di codice, quindi non vedo alcun motivo per utilizzare il plug-in.

Ok, ora su una soluzione.

Il codice seguente scorrerà fino al div corretto se fai clic su un link nella barra laterale. La finestra deve essere abbastanza grande da consentire lo scorrimento:

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

Esempio live

(Scorri fino alla funzione presa da qui )

PS: Ovviamente dovresti avere un motivo convincente per seguire questa strada invece di usare i tag anchor <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— Peter Ajtai
fonte
Sono contento di sapere che ha aiutato, ma penso che intendi "sottaceto", anche se trovo che sia meglio mangiarli piuttosto che uscirne.
— Peter Ajtai,
Non scorre al primo clic. : / Lo clicco una seconda volta e funziona.
— Burak Karakuş,
Penso che sia più logico mettere l'ID nell'href in
— Gino
non funziona per la prima volta. ma quando facciamo clic sulla seconda volta, allora funziona perfettamente.
— Satish Singh,
115

Non esiste alcun .scrollTo()metodo in jQuery, ma ce n'è .scrollTop()uno. .scrollTopsi aspetta un parametro, ovvero il valore in pixel in cui la barra di scorrimento dovrebbe scorrere fino a.

Esempio:

$(window).scrollTop(200);

scorrerà la finestra (se c'è abbastanza contenuto in essa).

Quindi puoi ottenere questo valore desiderato con .offset()o.position() .

Esempio:

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

Questo dovrebbe scorrere il #contact elemento in vista.

Il metodo alternativo non jQuery è .scrollIntoView(). Puoi chiamare quel metodo su qualsiasi DOM elementtipo:

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

trueindica che l'elemento è posizionato nella parte superiore mentre falselo posizionerebbe nella parte inferiore della vista. La cosa bella con il metodo jQuery è che puoi persino usarlo con fx functionslike .animate(). Quindi potresti scorrere uniformemente qualcosa.

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

— JANDY
fonte
Temo di avere ancora problemi simili. La pagina viene caricata scorrendo la pagina verso il basso di un determinato importo, non il div del contatto, e il collegamento non mi porta nemmeno al div del contatto. Grazie EDIT: dire che sto distanziando i div usando top con css, questo farebbe andare nel posto sbagliato? Solo un pensiero.
— tshauck
22

Puoi provare : 

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

Aggiungi questa piccola funzione e usala così: $('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
fonte
6

Ok ragazzi, questa è una piccola soluzione, ma funziona benissimo.

supponiamo che il seguente codice:

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

vuoi quando un nuovo post viene aggiunto a "the_div_holder", quindi scorre il suo contenuto interno (il .post del div) fino all'ultimo come una chat. Quindi, procedi come segue ogni volta che un nuovo .post viene aggiunto al supporto div principale:

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

Per prima cosa ottieni la posizione dell'elemento div su cui vuoi scorrere con il metodo position () di jQuery.
Esempio: var pos = $ ("div"). Position ();
Quindi ottieni le coordinate y (altezza) di quell'elemento con il metodo " .top ".
Esempio: pos.top;
Quindi ottieni le coordinate x dell'elemento div con il metodo " .left ".
Questi metodi sono originati dal posizionamento CSS.
Una volta ottenute le coordinate x & y, allora possiamo usare scrollTo () di javascript ; metodo.
Questo metodo consente di scorrere il documento fino a un'altezza e una larghezza specifiche.
Prende due parametri come coordinate x & y. Sintassi: window.scrollTo (x, y);
Quindi passa semplicemente le coordinate x & y dell'elemento DIV nella funzione scrollTo () .
Fare riferimento all'esempio seguente ↓ ↓

<!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
fonte
E fieno aggiungi qualche spiegazione testuale di quello che hai fatto, solo che non ha molto senso .. !!
— Clain Dsilva,
Come ha detto @ClainDsilva, aggiungi qualche spiegazione testuale.
— SreekanthGS,
-1

Non c'è bisogno anche di questi. Aggiungi semplicemente div id a href di un tag <a>

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

Proprio così.

— Armin Akhlagh
fonte
Per favore, getta più luce su questo. Non ha funzionato per me.
— Ifesinachi Bryan,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.