Come posso scorrere verso una posizione specifica sulla pagina usando jquery?

È ansible scorrere verso una posizione specifica sulla pagina usando jQuery?

La posizione che voglio scorrere deve avere:

here 

O può semplicemente passare a un ID DOM specifico?

jQuery Scroll Plugin

poiché questa è una domanda taggata con jquery, devo dire che questa libreria ha un plugin molto carino per lo scrolling scorrevole, lo puoi trovare qui: http://plugins.jquery.com/scrollTo/

Estratti dalla documentazione:

 $('div.pane').scrollTo(...);//all divs w/class pane 

o

 $.scrollTo(...);//the plugin will take care of this 

Funzione jQuery personalizzata per lo scorrimento

puoi utilizzare un approccio molto leggero definendo la tua funzione jquery di scorrimento personalizzata

 $.fn.scrollView = function () { return this.each(function () { $('html, body').animate({ scrollTop: $(this).offset().top }, 1000); }); } 

e usalo come:

 $('#your-div').scrollView(); 

Scorri fino alle coordinate di una pagina

Animare elementi html e body con scrollLeft attributi scrollTop o scrollLeft

 $('html, body').animate({ scrollTop: 0, scrollLeft: 300 }, 1000); 

Plain javascript

scorrendo con window.scroll

 window.scroll(horizontalOffset, verticalOffset); 

solo per riassumere, usa window.location.hash per passare all’elemento con ID

 window.location.hash = '#your-page-element'; 

Direttamente in HTML (miglioramenti dell’accessibilità)

 Jump to ID 
will jump here

Sì, anche in semplice JavaScript è abbastanza facile. Tu dai un elemento a un id e quindi puoi usarlo come “segnalibro”:

 
here

Se vuoi che scorrano lì quando un utente fa clic su un link, puoi semplicemente utilizzare il metodo tried-and-true:

 scroll to over there 

Per farlo a livello di scrollIntoView() , usa scrollIntoView()

 document.getElementById("here").scrollIntoView() 

Non è necessario utilizzare alcun plug-in, puoi farlo in questo modo:

 var divPosition = $('#divId').offset(); 

quindi usalo per far scorrere il documento su un DOM specifico:

 $('html, body').animate({scrollTop: divPosition.top}, "slow"); 

Ecco una versione javascript pura:

 location.hash = '#123'; 

Scorrerà automaticamente. Ricorda di aggiungere il prefisso “#”.

Plain Javascript:

 window.location = "#elementId" 
 
...

Questo esempio mostra di individuare un particolare div id, in questo caso ‘idVal’. Se hai div / tabelle successive che si apriranno in questa pagina tramite ajax, allora puoi assegnare div uniche e chiamare lo script per scorrere fino alla posizione specifica per ogni contenuto di div.

Spero che questo sia utile.

  

Prova questo

 
$(document).ready(function() { location.hash = "divRegister"; });

Ecco la variante dell’approccio leggero di @juraj-blahunka. Questa funzione non presuppone che il contenitore sia il documento e scorre solo se l’elemento non è visibile. Anche l’accodamento delle animazioni è disabilitato per evitare inutili rimbalzi.

 $.fn.scrollToView = function () { return $.each(this, function () { if ($(this).position().top < 0 || $(this).position().top + $(this).height() > $(this).parent().height()) { $(this).parent().animate({ scrollTop: $(this).parent().scrollTop() + $(this).position().top }, { duration: 300, queue: false }); } }); }; 

Utilizzando jquery.easing.min.js, Con errori di console IE fissi

html

 Features 
Features Section

jquery

 //jQuery to collapse the navbar on scroll, you can use this code with in external file with name scrolling-nav.js $(window).scroll(function () { if ($(".navbar").offset().top > 50) { $(".navbar-fixed-top").addClass("top-nav-collapse"); } else { $(".navbar-fixed-top").removeClass("top-nav-collapse"); } }); //jQuery for page scrolling feature - requires jQuery Easing plugin $(function () { $('a.page-scroll').bind('click', function (event) { var anchor = $(this); if ($(anchor).length > 0) { var href = $(anchor).attr('href'); if ($(href.substring(href.indexOf('#'))).length > 0) { $('html, body').stop().animate({ scrollTop: $(href.substring(href.indexOf('#'))).offset().top }, 1500, 'easeInOutExpo'); } else { window.location = href; } } event.preventDefault(); }); });