javascript - first - jquery parent




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

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

¿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?


¿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';

});

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

En mi caso, el cuerpo no funcionó:

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

Pero el HTML funcionó:

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

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.


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.


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

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.


Puede usar con jQuery

jQuery(window).load(function(){

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

});

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

Solución de JavaScript pura entre navegadores:

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

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

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


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!


$(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


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;"/>




scroll