[SOLUCIONADO] Scroll up a div en lugar de a body

[JUMASOL]

Hola.

Tengo este script para un scroll up que funciona perfectamente.

Código:

 <script type="text/javascript">
document.getElementById('scroll-to-top').onclick = function () {
    scrollTo(document.body, 0, 100);
}

    function scrollTo(element, to, duration) {
        if (duration < 0) return;
        var difference = to - element.scrollTop;
        var perTick = difference / duration * 2;

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        scrollTo(element, to, duration - 2);
    }, 10);
}
</script>

No quiero utilizar Jquery.

El problema es que quiero sustituir la dirección al body de la página por una localización dentro de la misma, ya sea un div o un ancla.

Es decir, cambiar

Código:

    scrollTo(document.body, 0, 100);

¿Me podéis orientar?

Gracias.

[Alexis88]

Si entendí bien, quieres que la barra se desplace hasta la posición de un determinado elemento. Si es así, solo necesitas utilizar la propiedad offsetTop.

Código Javascript:

var scroll = function(elemento){
    window.scrollTo(0, elemento.offsetTop);
};
 
scroll(document.querySelector("#foo")); //Se desplazará hasta el elemento de id "foo"
scroll(document.querySelector("#bar")); //Se desplazará hasta el elemento de id "bar"
 

Un saludo

[JUMASOL]

Hola Alexis88.

Y gracias por responder.

Te diré que no conozco esa propiedad, y por supuesto, así no me funciona:

Código:

 <script type="text/javascript">
var scroll = function(elemento){
    window.scrollTo(0, elemento.offsetTop);
};
 
scroll(document.querySelector("#foo")); //Se desplazará hasta el elemento de id "foo"
scroll(document.querySelector("#bar")); //Se desplazará hasta el elemento de id "bar"

    setTimeout(function() {
        elemento.offsetTop = elemento.offsetTop + perTick;
        scrollTo(elemento, to, duration - 2);
    }, 10);
}
</script>

[Alexis88]

Obviamente no funciona porque solo te limitaste a copiar y pegar el código y no lo adaptaste a lo que necesitas.

La idea es que el desplazamiento se realice hasta la ubicación del elemento, que, utilizando la propiedad en mención, será el borde superior del mismo.

Un ejemplo:

Código HTML:

<button class="scroll" data-id="#foo">Ir a Foo</button>
<button class="scroll" data-id="#bar">Ir a Bar</button>
<button class="scroll" data-id="#bin">Ir a Bin</button>
<button class="scroll" data-id="#baz">Ir a Baz</button>
    
<p id="foo">Contenido</p>
<p id="bar">Contenido</p>
<p id="bin">Contenido</p>
<p id="baz">Contenido</p>
 

Código Javascript:

document.addEventListener("click", function(event){
    if (event.target.className == "scroll"){
        window.scrollTo(0, document.querySelector(event.target.dataset.id).offsetTop);
    }
}, false);
 

Hay cuatro botones con la misma clase y pseudoatributos cuyos valores son los identificadores de los cuatro párrafos que se encuentran debajo de ellos. Cuando se produzca el evento click en el documento, tomamos al elemento directamente afectado por el evento y comprobamos que su clase sea la misma que asignamos a los botones; de ser así, desplazamos la barra vertical hasta la posición del elemento en cuestión.

DEMO

Es básicamente el mismo resultado que conseguirías utilizando enlaces y anclas.

Un saludo

[JUMASOL]

Sí, funciona, pero no tiene transición.

[Alexis88]

Para que tenga un efecto de desplazamiento suave, puedes ejecutar el mismo en intervalos en los que el desplazamiento se realice en espacios cortos y, al final de cada uno, verificarías que la cantidad desplazada sea mayor o igual al límite que es la ubicación del elemento; de ser así, terminarías el intervalo de repeticiones, para lo cual te bastaría con utilizar un temporizador cíclico.

Un ejemplo:

Código Javascript:

var intervalo = setInterval(function(){
    window.scrollTo(0, window.scrollY + 5);
    if (window.scrollY >= elemento.offsetTop) clearInterval(intervalo);
}, 10);
 

Un saludo