Desplácese a un div usando jquery

176

, así que tengo una página que tiene una barra de vínculos 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 menú de la casilla lateral. Aquí está el jQuery que tengo hasta ahoraDesplácese a un div usando jquery

$(document).ready(function() { 

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

});

El problema se va automáticamente a la div contacto cuando se carga, a continuación, al presionar el #contactlink en el menú que se desplaza de nuevo a la parte superior.

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>

Gracias por la ayuda

Fuente

2010-08-08 tshauck

¿Cómo es el HTML como para que el enlace de contacto debe ser? –

Esto puede ser un duplicado de http: // stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery –

¿Hay algún motivo por el que esté utilizando jQuery en lugar de anclas simples? – brianpeiris

295

En primer lugar, el código no contiene un div contact, tiene un div contacts!

En la barra lateral tienes contact en la div en la parte inferior de la página tienes contacts. Eliminé el s final para la muestra del código. (También escribió mal la identificación projectslink en la barra lateral).

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

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

Bien, 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);   
});

Live Example

~~(desplazamiento funcionen tomado de here)~~

PS: Es evidente que usted debe tener una razón de peso para seguir esta ruta en lugar de utilizar las etiquetas de anclaje <a href="#gohere">blah</a> ... <a name="gohere">blah title</a>

Fuente

2010-08-08 01:17:13

Me alegra saber que ayudó, pero creo que te refieres a "encurtido", aunque me parece mejor comerlos que salir de ellos. –

El enlace de referencia está muerto – evanmcd

No se desplaza al primer clic. :/Lo hago clic por segunda vez y funciona. –

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

Ejemplo:

$(window).scrollTop(200);

se desplazará por la ventana (si hay suficiente contenido en él).

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

Ejemplo:

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

Esto debe desplazarse el elemento #contact a la vista.

El método alternativo no jQuery es .scrollIntoView(). Usted puede llamar a ese método en cualquier DOM element como:

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

true indica que el elemento se coloca en la parte superior mientras que false sería colocarlo en la parte inferior de la vista. Lo bueno del método jQuery es que incluso puedes usarlo con fx functions como .animate(). Así que puedes suavizar el desplazamiento de algo.

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

Fuente

2010-08-08 01:02:53 jAndy

Me temo que sigo teniendo problemas similares. La página carga desplaza hacia abajo la página una cierta cantidad, no el contacto div tho, y el enlace tampoco me lleva al contacto div. Gracias también. EDITAR: dicen que estoy espaciando los divs usando top con css, ¿esto causaría que vaya al lugar equivocado? Solo un pensamiento. – tshauck

Añadir esta pequeña función y lo utilizan como modo: $('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); 
    }); 
    } 
});

Fuente

2010-08-08 02:27:07 Ryan

OK chicos, esta es una solución pequeña, 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>

que quiere cuando se añade una nueva entrada a 'the_div_holder', entonces se desplaza de su contenido interno (.post del div) a la última como una charla. Por lo tanto, hacer lo siguiente cada vez que se añade un nuevo .post al titular principal 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'));

Fuente

2013-03-20 01:58:47 christian

que puede probar:

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

Fuente

2014-08-25 14:03:19

En primer lugar obtener la posición del elemento div hasta que u desea desplazarse por el método jQuery position().
Ejemplo: var pos = $ ("div"). Position();
Luego obtenga los cordinates (altura) de ese elemento con el método ".top".
Ejemplo: pos.top;
Luego obtenga los x cordinates de ese elemento div con el método ".left".
Estos métodos se originan desde el posicionamiento de CSS.
Una vez que obtengamos x & y cordinates, entonces podemos usar javascript scrollTo(); método.
Este método desplaza el documento hasta altura específica & ancho.
Toma dos parámetros como x & y cordinates. Sintaxis: window.scrollTo (x, y);
Luego solo pase los x & y cordinates 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>

Fuente

2015-04-26 06:41:11

Y agrega algo de texto explicativo de lo que hiciste, ¡simplemente no tiene mucho sentido ...! –

Como dijo @ClainDsilva, por favor agregue alguna explicación textual. – SreekanthGS

Respuesta

Cuestiones relacionadas