javascript - ejemplos - jquery first child

¿Cómo desplazarse hasta la parte superior de la página con JavaScript/jQuery?

Question

¿Hay alguna manera de controlar el desplazamiento del navegador con JavaScript / jQuery?

Cuando me desplazo por la mitad de la página, luego disparo una recarga, quiero que la página se empaquete en la parte superior, pero en su lugar, trata de encontrar la última posición de desplazamiento. Entonces hice esto:

$(''document'').ready(function() {
   $(window).scrollTop(0);
});

Pero sin suerte.

EDITAR :

Entonces, ambas respuestas funcionaron cuando las llamé después de cargar la página. Gracias. Sin embargo, si acabo de hacer una actualización en la página, parece que el navegador calcula y se desplaza a su antigua posición de desplazamiento DESPUÉS del evento .ready (también probé la función onload () del cuerpo).

Entonces, el seguimiento es, ¿hay alguna manera de EVITAR que el navegador se desplace a su posición anterior, o volver a desplazarse hacia la parte superior DESPUÉS de que haga lo suyo?

Answer 1

¿Hay alguna manera de EVITAR que el navegador se desplace a su posición anterior o volver a desplazarse a la parte superior DESPUÉS de que haga lo suyo?

La siguiente solución de jquery funciona para mí:

$(window).unload(function() {
    $(''body'').scrollTop(0);
});

Answer 2

¿Por qué no utilizas algún elemento de referencia al principio de tu archivo html, como

<div id="top"></div>

y luego, cuando la página se carga, simplemente hazlo

$(document).ready(function(){

    top.location.href = ''#top'';

});

Si el navegador se desplaza después de que se activa esta función, simplemente lo hace

$(window).load(function(){

    top.location.href = ''#top'';

});

Answer 3

Aquí hay una versión de desplazamiento animada de JavaScript para no-jQuery''ers: D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

Y entonces:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

Answer 4

El siguiente código funciona en Firefox, Chrome y Safari , pero no pude probarlo en Internet Explorer. ¿Alguien puede probarlo y luego editar mi respuesta o comentar sobre ella?

$(document).scrollTop(0);

Answer 5

En mi caso, el cuerpo no funcionó:

$(''body'').scrollTop(0);

Pero el HTML funcionó:

$(''html'').scrollTop(0);

Answer 6

Esto está funcionando:

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});

Answer 7

Esto funciona para mí:

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

Utiliza un setTimeout corto dentro de la setTimeout para darle al navegador la oportunidad de hacer el desplazamiento.

Answer 8

Mi solución Javascript (animada) pura:

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

Explicación:

window.scrollY es una variable mantenida por el navegador de la cantidad de píxeles desde la parte superior por la que se ha desplazado la ventana.

window.scrollTo(x,y) es una función que desplaza la ventana una cantidad específica de píxeles en el eje xy en el eje y.

Por lo tanto, window.scrollTo(0,window.scrollY-20) mueve la página 20 píxeles hacia la parte superior.

El setTimeout llama de nuevo a la función en 10 milisegundos para que podamos moverlo otros 20 píxeles (animados), y la instrucción if comprueba si todavía necesitamos desplazarnos.

Answer 9

Mira, el hash debería hacer el trabajo. Si tiene un encabezado, puede usar

window.location.href = "#headerid";

de lo contrario, el # solo funcionará

window.location.href = "#";

Y a medida que se escribe en la url, se mantendrá si actualiza.

De hecho, no necesita JavaScript para eso si desea hacerlo en un evento onclick, simplemente debe poner un enlace alrededor de su elemento y darle # como href.

Answer 10

Navegador cruzado hacia la parte superior:

        if($(''body'').scrollTop()>0){
            $(''body'').scrollTop(0);         //Chrome,Safari
        }else{
            if($(''html'').scrollTop()>0){    //IE, FF
                $(''html'').scrollTop(0);
            }
        } 

Desplazarse por el navegador a un elemento con id = div_id:

        if($(''body'').scrollTop()>$(''#div_id'').offset().top){
            $(''body'').scrollTop($(''#div_id'').offset().top);         //Chrome,Safari
        }else{
            if($(''html'').scrollTop()>$(''#div_id'').offset().top){    //IE, FF
                $(''html'').scrollTop($(''#div_id'').offset().top);
            }
        } 

Answer 11

Para responder a su pregunta editada, puede registrar el controlador onscroll la onscroll manera:

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

Esto hará que el primer intento de desplazamiento (que probablemente sea el automático realizado por el navegador) se cancelará de manera efectiva.

Answer 12

Primero agregue una etiqueta de ancla en blanco al lugar donde desea ir

<a href="#topAnchor"></a> 

Ahora agregue una función en la sección de encabezado

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

finalmente agregar un evento de carga a la etiqueta del cuerpo

<body onload="GoToTop()">

Answer 13

Puede usar con jQuery

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

Answer 14

Si alguien está usando un diseño angular y material con sidenav. Esto lo enviará a la parte superior de la página:

let ele = document.getElementsByClassName(''md-sidenav-content'');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });

Answer 15

Si estás en modo quirck (gracias @Niet the Dark Absol):

document.body.scrollTop = document.documentElement.scrollTop = 0;

Si estás en modo estricto:

document.documentElement.scrollTop = 0;

No hay necesidad de jQuery aquí.

Answer 16

Solución de JavaScript pura entre navegadores:

document.body.scrollTop = document.documentElement.scrollTop = 0;

Answer 17

Una versión genérica que funciona para cualquier valor X e Y, y es lo mismo que window.scrollTo api, solo con la adición de scrollDuration.

* Una versión genérica que coincida con la aplicación window.scrollTo del navegador **

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}

Answer 18

Use la siguiente función

window.scrollTo(xpos, ypos)

Aquí se requiere xpos. Las coordenadas para desplazarse, a lo largo del eje x (horizontal), en píxeles

ypos también es obligatorio. Las coordenadas para desplazarse, a lo largo del eje y (vertical), en píxeles

Answer 19

sin animación, solo scroll(0, 0) (JS vainilla)

Answer 20

ACTUALIZAR

Ir al principio de la página con un efecto de desplazamiento es ahora un poco más fácil en javascript con:

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

window.scroll({
 top: 0, 
 left: 0, 
 behavior: ''smooth'' 
});

PRECAUCIÓN

Hemos estado usando esto en nuestros proyectos más recientes, pero acabo de consultar el documento de mozilla en este momento mientras actualizo mi respuesta y creo que se ha actualizado. En este momento, el método es window.scroll(x-coord, y-coord) y no menciona ni muestra ejemplos que usan el parámetro object en el que puede establecer el behavior para smooth . Acabo de probar el código y todavía funciona en Chrome y Firefox y el parámetro del objeto todavía está en la spec .

Así que Polyfill con precaución o puedes usar este Polyfill . Además de desplazarse hacia la parte superior, este polyfill también maneja otros métodos: window.scrollBy , element.scrollIntoView , etc.

ANTIGUA RESPUESTA

Esta es nuestra implementación javascript vainilla. Tiene un efecto de suavizado simple para que el usuario no se sorprenda después de hacer clic en el botón To Top .

Es muy pequeño y se hace aún más pequeño cuando se minimiza. Los desarrolladores que buscan una alternativa al método jquery pero quieren los mismos resultados pueden probar esto.

JS

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

HTML

<button id="to-top">To Top</button>

¡Aclamaciones!

Answer 21

Casi lo tienes: necesitas configurar scrollTop en el body , no en la window :

$(function() {
   $(''body'').scrollTop(0);
});

EDITAR:

Tal vez puedas agregar un ancla en blanco en la parte superior de la página:

$(function() {
   $(''<a name="top"/>'').insertBefore($(''body'').children().eq(0));
   window.location.hash = ''top'';
});

Answer 22

$(function() {
    // the element inside of which we want to scroll
        var $elem = $(''#content'');

        // show the buttons
    $(''#nav_up'').fadeIn(''slow'');
    $(''#nav_down'').fadeIn(''slow'');  

        // whenever we scroll fade out both buttons
    $(window).bind(''scrollstart'', function(){
        $(''#nav_up,#nav_down'').stop().animate({''opacity'':''0.2''});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind(''scrollstop'', function(){
        $(''#nav_up,#nav_down'').stop().animate({''opacity'':''1''});
    });

        // clicking the "down" button will make the page scroll to the $elem''s height
    $(''#nav_down'').click(
        function (e) {
            $(''html, body'').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $(''#nav_up'').click(
        function (e) {
            $(''html, body'').animate({scrollTop: ''0px''}, 800);
        }
    );
 });

Utilizar esta

Answer 23

var totop = $(''#totop'');
totop.click(function(){
 $(''html, body'').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>