javascript - página - scroll animado jquery

Enlaces de anclaje de desplazamiento suave SIN jQuery

Question

¿Es posible usar desplazamiento suave para enlaces de anclaje pero sin jQuery ? Estoy creando un nuevo sitio y no quiero usar jQuery .

Answer 1

Ampliando esta respuesta: https://.com/a/8918062/3851798

Después de definir su función de scrollTo, puede pasar el elemento al que desea desplazarse a la función.

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

    setTimeout(function() {
        element.scrollTop = element.scrollTop + perTick;
        if (element.scrollTop === to) return;
        scrollTo(element, to, duration - 10);
    }, 10);
}

Si tiene un div con un id = "pie de página"

<div id="footer" class="categories">…</div>

En el script que ejecuta para desplazarse puede ejecutar esto,

elmnt = document.getElementById("footer");
scrollTo(document.body, elmnt.offsetTop, 600);

Y ahí lo tienes. Desplazamiento suave sin jQuery. En realidad, puedes jugar con ese código en la consola de tu navegador y ajustarlo a tu gusto.

Answer 2

Biblioteca javascript liviana pura: desplazamiento suave en github

Answer 3

Comportamiento de desplazamiento suave con polyfill ...

Ejemplo:

document.querySelectorAll(''a[href^="#"]'').addEventListener(''click'', function(e) { e.preventDefault(); document.querySelector(this.getAttribute(''href'')).scrollIntoView({ behavior: ''smooth'' }); });

Repositorio: https://github.com/iamdustan/smoothscroll

Answer 4

En realidad, hay una manera más simple y ligera de hacerlo: https://codepen.io/ugg0t/pen/mqBBBY

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

document.getElementById("button").addEventListener(''click'', () => {
  scrollTo(document.getElementById("8"));
});

div {
  width: 100%;
  height: 200px;
  background-color: black;
}

div:nth-child(odd) {
  background-color: white;
}

button {
  position: absolute;
  left: 10px;
  top: 10px;
}

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<div id="6"></div>
<div id="7"></div>
<div id="8"></div>
<div id="9"></div>
<div id="10"></div>
<button id="button">Button</button>

Answer 5

Las transiciones de CSS3 con un selector de :target pueden dar un buen resultado sin ninguna piratería JS. Solo estaba considerando si imponer esto, pero sin Jquery se vuelve un poco complicado. Vea esta pregunta para más detalles.

Answer 6

Mi biblioteca scroll-to favorita actualmente es Zenscroll debido a la amplia gama de funciones y tamaño pequeño (actualmente solo 3.17kb).

En el futuro, puede tener más sentido utilizar la funcionalidad nativa developer.mozilla.org/en-US/docs/Web/API/Element/… , pero dado que debería ser satisfecha en la mayoría de los sitios de producción debido a la falta de soporte de IE, recomiendo usar Zenscroll en todos los casos.

Answer 7

Usando la función desde aquí: animación de JavaScript y modificándola para modificar una propiedad (no solo la propiedad de un estilo), puedes probar algo como esto:

function animate(elem, style, unit, from, to, time, prop) {
    if (!elem) {
        return;
    }
    var start = new Date().getTime(),
        timer = setInterval(function () {
            var step = Math.min(1, (new Date().getTime() - start) / time);
            if (prop) {
                elem[style] = (from + step * (to - from))+unit;
            } else {
                elem.style[style] = (from + step * (to - from))+unit;
            }
            if (step === 1) {
                clearInterval(timer);
            }
        }, 25);
    if (prop) {
          elem[style] = from+unit;
    } else {
          elem.style[style] = from+unit;
    }
}

window.onload = function () {
    var target = document.getElementById("div5");
    animate(document.scrollingElement || document.documentElement, "scrollTop", "", 0, target.offsetTop, 2000, true);
};

DEMO: https://jsfiddle.net/zpu16nen/

Asegúrate de que el tamaño de la ventana sea lo suficientemente pequeño para que haya una barra de desplazamiento y puedas desplazarte al quinto div.

Y no, no requirió la recreación del 25% de jQuery.

Obviamente, esto sería muy modificado dependiendo de lo que realmente signifique su pregunta (como cuando cambia el hash de la ventana, o algo así).

Tenga en cuenta que con jQuery, es tan fácil como:

$(document).ready(function () {
    $("html, body").animate({
        scrollTop: $("#div5").offset().top
    }, 2000);
});

DEMO: http://jsfiddle.net/7TAa2/1/

Solo digo...

Answer 8

Utilizar esta:

let element = document.getElementById("box");

element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

DEMO : https://jsfiddle.net/anderpo/x8ucc5ak/1/

Answer 9

puede usar esta biblioteca de JavaScript para agregar un desplazamiento suave a todos sus enlaces internos. También puede agregar configuración para proporcionar enlaces a ignorar. Puede tener una mirada detallada aquí. https://codingninjascodes.github.io/SmoothScrollJs/