Come posso scorrere fino a una posizione specifica sulla pagina usando jquery?

È possibile scorrere fino a una posizione specifica sulla pagina utilizzando jQuery?

La posizione che voglio scorrere deve avere:

<a name="#123">here</a>

O può semplicemente passare a un ID DOM specifico?

Plugin di scorrimento jQuery

dal momento che questa è una domanda taggata con jquery, devo dire che questa libreria ha un plugin molto bello per uno scorrimento fluido, puoi trovarlo 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 usare un approccio molto leggero definendo la tua funzione di scorrimento personalizzata jquery

$.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 htmled bodyelementi con scrollTopo scrollLeftattributi

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

JavaScript semplice

scorrendo con window.scroll

window.scroll(horizontalOffset, verticalOffset);

solo per riassumere, usa window.location.hash per saltare all'elemento con ID

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

Direttamente in HTML (miglioramenti dell'accessibilità)

<a href="#your-page-element">Jump to ID</a>

<div id="your-page-element">
    will jump here
</div>

Sì, anche in JavaScript semplice è abbastanza facile. Dai a un elemento un ID e poi puoi usarlo come "segnalibro":

<div id="here">here</div>

Se vuoi che scorra lì quando un utente fa clic su un link, puoi semplicemente usare il metodo provato e vero:

<a href="#here">scroll to over there</a>

Per farlo a livello di codice, utilizzare scrollIntoView()

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

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

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

quindi utilizzalo per scorrere il documento fino a 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 "#".

Javascript normale:

window.location = "#elementId"

<div id="idVal">
    <!--div content goes here-->
</div>
...
<script type="text/javascript">
     $(document).ready(function(){
         var divLoc = $('#idVal').offset();
         $('html, body').animate({scrollTop: divLoc.top}, "slow");
     });
</script>

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

Spero che questo sia utile.

<script type="text/javascript">
    $(document).ready(function(){
        $(".scroll-element").click(function(){
            $('html,body').animate({
                scrollTop: $('.our_companies').offset().top
            }, 1000);

            return false;
        });
    })
</script>

Prova questo

<div id="divRegister"></div>

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

Ecco una 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 corretti

html

<a class="page-scroll" href="#features">Features</a>
<section id="features" class="features-section">Features Section</section>


        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>

        <!-- Scrolling Nav JavaScript -->
        <script src="js/jquery.easing.min.js"></script>

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

Puoi usarlo scroll-behavior: smooth;per farlo senza Javascript

https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior