¿Cómo puedo desplazarme a una ubicación específica en la página usando jquery?

¿Es posible desplazarse a una ubicación específica en la página usando jQuery?

¿La ubicación que quiero desplazar para tener que tener:

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

¿O simplemente puede pasar a un ID de DOM específico?

Complemento de desplazamiento jQuery

Como esta es una pregunta etiquetada con jquery, debo decir que esta biblioteca tiene un complemento muy bueno para un desplazamiento suave, puede encontrarlo aquí: http://plugins.jquery.com/scrollTo/

Extractos de la documentación:

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

o

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

Función jQuery personalizada para desplazamiento

puede utilizar un enfoque muy ligero definiendo su función personalizada jquery de desplazamiento

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

y úsalo como:

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

Desplazarse a las coordenadas de una página

Animado htmly bodyelementos con scrollTopo scrollLeftatributos

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

JavaScript simple

desplazarse con window.scroll

window.scroll(horizontalOffset, verticalOffset);

solo para resumir, use window.location.hash para saltar al elemento con ID

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

Directamente en HTML (mejoras de accesibilidad)

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

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

Sí, incluso en JavaScript simple es bastante fácil. Usted le da una identificación a un elemento y luego puede usarlo como un "marcador":

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

Si desea que se desplace allí cuando un usuario hace clic en un enlace, puede usar el método probado y verdadero:

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

Para hacerlo mediante programación, use scrollIntoView()

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

No es necesario utilizar ningún complemento, puede hacerlo así:

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

luego use esto para desplazar el documento a DOM específico:

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

Aquí hay una versión pura de JavaScript:

location.hash = '#123';

Se desplazará automáticamente. Recuerde agregar el prefijo "#".

Javascript simple:

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>

Este ejemplo muestra la ubicación de una identificación div particular, es decir, 'idVal' en este caso. Si tiene divs / tablas posteriores que se abrirán en esta página a través de ajax, puede asignar divs únicos y llamar al script para desplazarse a la ubicación particular para cada contenido de divs.

Espero que esto sea útil.

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

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

Prueba esto

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

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

Aquí hay una variante del enfoque liviano de @ juraj-blahunka . Esta función no asume que el contenedor es el documento y solo se desplaza si el elemento no está a la vista. La cola de animación también está desactivada para evitar rebotes innecesarios.

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

Usando jquery.easing.min.js, con errores fijos de la consola IE

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

Puede usar scroll-behavior: smooth;para hacer esto sin Javascript

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