jQuery: como rolar para determinada âncora / div no carregamento da página?

Ultimamente estou tentando usar jquery com mais freqüência e agora estou tendo algum problema que eu gostaria de resolver com jquery espero que você poderia me ajudar.

Eu tenho uma página web que inclui alguma tag âncora (digamos que a âncora está localizada no meio da página) e no evento onload eu quero que a página comece naquele determinado local de tag âncora significando que a página será “rolada” automaticamente para um determinado local.

Essa foi a minha solução anterior (que é bem feia, já que adiciona #i ao meu url)

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

Enfim poderia me dizer como posso fazer isso com jquery?

aviso: não quero que o usuário sinta nenhum deslize ou efeito ao chegar a esse local

Use o seguinte exemplo simples

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

onde ele é seu elemento (jQuery) .. por exemplo: scrollToElement($('#myid'));

Não há necessidade de usar o jQuery porque esta é uma funcionalidade JavaScript nativa

 element.scrollIntoView() 

Eu tentei algumas horas agora e a maneira mais fácil de impedir que os navegadores pulem para a âncora em vez de rolar para ela é: Usar outra âncora (um id que você não usa no site). Então, ao invés de linkar para “http: // # YourActualID”, você linka para “http: // # NoIDonYourSite”. Poof, os navegadores não pularão mais.

Em seguida, basta verificar se uma âncora está definida (com o script fornecido abaixo, que é retirado do outro segmento!). E defina seu ID real para o qual você deseja rolar.

 $(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); } }); }); 

Consulte http://pro.lightningsoul.com/?c=media&sc=article&cat=coding&id=30#content como exemplo de trabalho.

Dê uma olhada nisso

Acrescentar o #value ao endereço é o comportamento padrão que navegadores como o IE usam para identificar posições de âncora nomeadas na página, visto que isso vem do Netscape.

Você pode interceptá-lo e removê-lo, leia este artigo.

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

Eu consigo assim

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

basta usar o plugin scrollTo

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

Basta append # [id de div você deseja rolar para] para url page url. para esta página, o URL é

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

Então, se eu quiser rolar para onload seção de direitos autorais, o URL deve ser –

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