jQuery: ¿cómo desplazarse a cierto ancla/div en la carga de la página?

Question

Últimamente trato de usar jquery con más frecuencia y ahora tengo algún problema que me gustaría resolver con jquery. Espero que puedas ayudarme.

Tengo una página web que incluye alguna etiqueta de anclaje (digamos que el ancla se encuentra en el medio de la página) y en el evento de carga quiero que la página comience en esa ubicación de etiqueta de anclaje determinada que significa que la página "desplazado" automáticamente a un lugar determinado.

Esa fue mi solución anterior (que es bastante feo, ya que añade #i a mi url)

window.onload = window.location.hash = 'i'; 

De todos modos podría u dime cómo puedo hacerlo con jQuery?

aviso: no quiero que el usuario sienta cualquier diapositiva o el efecto, mientras que para llegar a este lugar

Answer 1

Utilice el siguiente ejemplo sencillo

function scrollToElement(ele) { 
    $(window).scrollTop(ele.offset().top).scrollLeft(ele.offset().left); 
} 

donde ele es su elemento (jQuery) .. por ejemplo: scrollToElement($('#myid'));

Answer 2

Tenga una mirada en this

Agregar el valor # a la dirección es el comportamiento predeterminado que usan los navegadores como IE para identificar las posiciones de ancla nombradas en la página, ya que esto proviene de Netscape.

Puede interceptarlo y eliminarlo, lea el artículo this.

Answer 3

sólo tiene que utilizar scrollTo complemento

$("document").ready(function(){ 
    $(window).scrollTo("#div") 
}) 

Answer 4

no hay necesidad de usar jQuery porque esto es native JavaScript functionality

element.scrollIntoView() 

Answer 5

He intentado algunas horas de hoy y la forma más fácil de detener los navegadores para saltar al ancla en lugar de desplazarse hacia él, está: Usar otro delimitador (una identificación que no usa en el sitio). Entonces, en lugar de vincular a "http: // # YourActualID", se vincula a "http: // # NoIDonYourSite". Poof, los navegadores ya no saltarán.

Luego, simplemente verifique si se ha establecido un anclaje (con la secuencia de comandos proporcionada a continuación, que se extrae del otro hilo). Y configure su identificación real a la que desea desplazarse.

$(document).ready(function(){ 


    $(window).load(function(){ 
    // Remove the # from the hash, as different browsers may or may not include it 
    var hash = location.hash.replace('#',''); 

    if(hash != ''){ 

     // Clear the hash in the URL 
     // location.hash = ''; // delete front "//" if you want to change the address bar 
     $('html, body').animate({ scrollTop: $('#YourIDtoScrollTo').offset().top}, 1000); 

     } 
    }); 
}); 

Ver http://pro.lightningsoul.com/?c=media&sc=article&cat=coding&id=30#content para un ejemplo de trabajo.

Answer 6

/* START --- scroll till anchor */ 
     (function($) { 
      $.fn.goTo = function() { 
        var top_menu_height=$('#div_menu_header').height() + 5 ; 
        //alert ('top_menu_height is:' + top_menu_height); 
        $('html, body').animate({ 
         scrollTop: (-1)*top_menu_height + $(this).offset().top + 'px' 
        }, 500); 
        return this; // for chaining... 
      } 
     })(jQuery); 

     $(document).ready(function(){ 

      var url = document.URL, idx = url.indexOf("#") ; 
      var hash = idx != -1 ? url.substring(idx+1) : ""; 

      $(window).load(function(){ 
      // Remove the # from the hash, as different browsers may or may not include it 
      var anchor_to_scroll_to = location.hash.replace('#',''); 
      if (anchor_to_scroll_to != '') { 
       anchor_to_scroll_to = '#' + anchor_to_scroll_to ; 
       $(anchor_to_scroll_to).goTo(); 
      } 
      }); 
     }); 
    /* STOP --- scroll till anchror */ 

Answer 7

Solo añada # [id of div desea desplazarse a] ur ur url. para que esta página url es

http://stackoverflow.com/questions/9757625/jquery-how-to-scroll-to-certain-anchor-div-on-page-load 

así que si quiero para desplazarse a la sección de derechos de autor proceso de carga, entonces la URL debe ser -

http://stackoverflow.com/questions/9757625/jquery-how-to-scroll-to-certain-anchor-div-on-page-load#copyright 

Answer 8

lo consigo como esto ..

if(location.pathname == '/registration') 
{ 
$('html, body').animate({ scrollTop: $('#registration').offset().top - 40}, 1000); 
}