name - obtener valor de un boton jquery
Desplácese a un div usando jquery (6)
Agregue esta pequeña función y úselo de la siguiente manera: $(''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);
});
}
});
entonces tengo una página que tiene una barra de enlaces 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 ahora
$(document).ready(function() {
$(''#contactlink'').click = function (){
$(document).scrollTo(''#contact'');
}
});
El problema es que va automáticamente a la div de contacto cuando se carga, luego cuando presiono #contactlink en el menú, se desplaza de regreso a la parte superior.
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
Bien 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>
quieres cuando se agrega una nueva publicación a ''the_div_holder'' y luego desplaza su contenido interno (the div''s .post) al último como un chat. Por lo tanto, haga lo siguiente cada vez que se agregue un nuevo .post al titular de 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''));
No hay .scrollTo() método .scrollTo() en jQuery, pero hay un .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);
desplazará la ventana (si hay suficiente contenido en ella).
Entonces puede obtener este valor deseado con .offset() o .position() .
Ejemplo:
$(window).scrollTop($(''#contact'').offset().top);
Esto debería desplazar el elemento #contact a la vista.
El método alternativo no jQuery es .scrollIntoView() . 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 lo colocaría 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()
Primero, obtenga la posición del elemento div hasta el cual 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 tengamos cordinates X y Y, podremos usar scrollTo () de JavaScript ; método.
Este método desplaza el documento hasta altura y ancho específicos.
Toma dos parámetros a medida que xey se cordinates. Sintaxis: window.scrollTo (x, y);
Luego solo pase los cordinates xey del elemento DIV en la función scrollTo () .
Consulte el ejemplo a continuación ↓ ↓
<!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>
Primero, su código no contiene un div de contact , ¡tiene un div de contacts !
En la barra lateral tienes contact en el div en la parte inferior de la página que tienes contacts . Eliminé la s final para la muestra de código. (También escribió mal el id del projectslink en la barra lateral).
Segundo, eche un vistazo a algunos de los ejemplos para click en la página de referencia de jQuery. Tienes que usar click like, object.click( function() { // Your code here } ); para vincular un controlador de evento click al objeto .... Como en mi ejemplo a continuación. Como object.click() , 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.
Ok, ahora vamos 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);
});
(Desplácese a la función tomada desde here )
PD: Obviamente, deberías tener un motivo convincente para seguir esta ruta en lugar de utilizar etiquetas de anclaje <a href="#gohere">blah</a> ... <a name="gohere">blah title</a>
puedes probar :
$("#MediaPlayer").ready(function(){
$("html, body").delay(2000).animate({
scrollTop: $(''#MediaPlayer'').offset().top
}, 2000);
});