Desplácese a un div usando jquery

205

entonces tengo una página que tiene una barra de enlace fija en el lateral. Me gustaría desplazarme a los diferentes divs. Básicamente, la página es solo un sitio web largo, donde me gustaría desplazarme a diferentes divs usando el cuadro de menú a un lado.

Aquí está el jquery que tengo hasta ahora

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

El problema es que va automáticamente al div de contacto cuando se carga, luego, cuando presiono #contactlinken el menú, se desplaza hacia arriba.

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

Gracias por la ayuda

jquery  scroll 
— tshauck
fuente
¿Qué aspecto tiene el html para saber dónde debería estar el enlace de contacto?
— James Black
— James Black
3
¿Hay alguna razón por la que estás usando jQuery en lugar de anclas viejas y simples?
— brianpeiris
2
@ James - Eso no es realmente un duplicado. Esta pregunta desplaza una página a divs específicos. Esa pregunta desplaza una página por incrementos definidos (independientemente de lo que se muestran los divs).
— Peter Ajtai el
Esto es realmente bueno: css-tricks.com/snippets/jquery/smooth-scrolling . Trabajó para mi.
— maahd

Respuestas:

342

Primero, su código no contiene un contactdiv, ¡tiene un contactsdiv!

En la barra lateral que tienes contacten el div en la parte inferior de la página que tienes contacts. Eliminé el final spara el ejemplo de código. (también escribiste mal la projectslinkidentificación en la barra lateral).

En segundo lugar, eche un vistazo a algunos de los ejemplos para hacer clic en la página de referencia de jQuery. Debe usar hacer clic en Me gusta object.click( function() { // Your code here } );para vincular un controlador de eventos de clic al objeto ... Como en mi ejemplo a continuación. Como comentario aparte, también puede activar un clic en un objeto usándolo sin argumentos, comoobject.click() .

Tercero, scrollToes un complemento en jQuery. No sé si tienes el complemento instalado. No se puede usar scrollTo()sin el complemento. En este caso, la funcionalidad que desea es de solo 2 líneas de código, por lo que no veo ninguna razón para usar el complemento.

Ok, ahora a una solución.

El siguiente código se desplazará al div correcto si hace clic en un enlace en la barra lateral. La ventana tiene que ser lo suficientemente grande como para permitir el desplazamiento:

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

Ejemplo en vivo

(Desplácese a la función tomada desde aquí )

PD: Obviamente deberías tener una razón convincente para seguir esta ruta en lugar de usar etiquetas de anclaje <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— Peter Ajtai
fuente
Me alegra saber que ayudó, pero creo que te refieres a "pepinillo", aunque creo que es mejor comerlos que salir de ellos.
— Peter Ajtai
No se desplaza al primer clic. : / Lo hago clic por segunda vez y funciona.
— Burak Karakuş
Creo que es más lógico poner la ID a href de esta manera: href = "# about" jsfiddle.net/onigetoc/w5muyern
— Gino
No funciona por primera vez. pero cuando hacemos clic en la segunda vez, entonces funciona perfectamente.
— Satish Singh
115

No hay ningún .scrollTo()método en jQuery, pero hay .scrollTop()uno. .scrollTopespera un parámetro, es decir, el valor de píxel al que debe desplazarse la barra de desplazamiento.

Ejemplo:

$(window).scrollTop(200);

desplazará la ventana (si hay suficiente contenido en ella).

Para que pueda obtener este valor deseado con .offset()o.position() .

Ejemplo:

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

Esto debería desplazar el #contact elemento a la vista.

El método alternativo no jQuery es .scrollIntoView(). Puede llamar a ese método de cualquier DOM elementmanera:

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

trueindica que el elemento está colocado en la parte superior mientras que falselo colocaría en la parte inferior de la vista. Lo bueno del método jQuery es que incluso puedes usarlo con me fx functionsgusta .animate(). Por lo tanto, puede deslizar algo suavemente.

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

— jAndy
fuente
Me temo que todavía tengo problemas similares. La página se carga desplazándose hacia abajo en la página una cierta cantidad, no en el div de contacto, y el enlace tampoco me lleva al div de contacto. Gracias. EDITAR: digamos que estoy espaciando los divs usando top con css, ¿esto causaría que vaya al lugar equivocado? Solo un pensamiento.
— tshauck
22

puedes probar : 

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

Agregue esta pequeña función y úsela así: $('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
fuente
6

OK chicos, esta es una pequeña solución, pero funciona bien.

supongamos el siguiente código:

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

desea cuando una nueva publicación se agrega a 'the_div_holder' y luego desplaza su contenido interno (el div .post) a la última como un chat. Por lo tanto, haga lo siguiente cada vez que se agregue un nuevo .post al soporte 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'));
— cristiano
fuente
3

Primero obtenga la posición del elemento div hasta la que desea desplazarse mediante el método jQuery position ().
Ejemplo: var pos = $ ("div"). Position ();
Luego, obtenga los cordinates y (altura) de ese elemento con el método " .top ".
Ejemplo: pos.top;
Luego obtenga las x cordinates del elemento div con el método " .left ".
Estos métodos se originan a partir del posicionamiento CSS.
Una vez que obtenemos las coordenadas x & y, entonces podemos usar el scrollTo () de javascript ; método.
Este método desplaza el documento hasta una altura y ancho específicos.
Se necesitan dos parámetros como x & y cordinates. Sintaxis: window.scrollTo (x, y);
Luego, simplemente pase las cordinas x e y del elemento DIV en la función scrollTo () .
Consulte el siguiente ejemplo ↓ ↓

<!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
fuente
Y hay que añadir alguna explicación de texto de lo que hiciste, ¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡¡No tiene mucho sentido !!
— Clain Dsilva
Como dijo @ClainDsilva, agregue alguna explicación textual.
— SreekanthGS
-1

No es necesario también estos. Simplemente agregue div id a href de una etiqueta <a>

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

Así.

— Armin Akhlagh
fuente
Por favor, arroja más luz sobre esto. No me funcionó.
— Ifesinachi Bryan
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.