it-swarm.com.de

Glatte Scroll-Ankerlinks OHNE jQuery

Ist es möglich, einen glatten Bildlauf zu verwenden, um Links zu verankern, aber ohnejQuery? Ich erstelle eine neue Site und möchte jQuery nicht verwenden.

40
drozdzynski

Verwenden Sie die Funktion von hier: JavaScript-Animation und ändern Sie sie, um eine Eigenschaft zu ändern (nicht nur die Eigenschaft eines Stils). So können Sie Folgendes versuchen:

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/

Stellen Sie sicher, dass Sie das Fenster so klein bemessen, dass es tatsächlich eine Bildlaufleiste gibt und Sie zum 5. Div blättern können.

Und nein, es mussten nicht 25% von jQuery neu erstellt werden.

Dies würde natürlich stark modifiziert werden, abhängig davon, was Ihre Frage tatsächlich bedeutet (wenn sich beispielsweise der Fenster-Hash ändert oder ähnliches).

Beachten Sie, dass es mit jQuery so einfach ist wie:

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

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

Nur sagen ...

36
Ian

Diese Antwort erweitern: https://stackoverflow.com/a/8918062/3851798

Nachdem Sie Ihre Funktion von scrollTo definiert haben, können Sie das Element, das Sie scrollen möchten, in der Funktion übergeben.

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

Wenn du ein div mit einer id = "footer" hast

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

In dem Skript, das Sie zum Scrollen ausführen, können Sie Folgendes ausführen:

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

Und da hast du es. Reibungsloses Scrollen ohne jQuery. Sie können mit diesem Code auf der Konsole Ihres Browsers herumspielen und ihn nach Ihren Wünschen anpassen.

49
Tejas Shah

Eigentlich gibt es eine leichtere und einfachere Möglichkeit, dies zu tun: 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>

17

Benutze das:

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/

5
Anderpo

CSS3-Übergänge mit einem :target-Selektor können ohne JS-Hacking ein Nice-Ergebnis ergeben. Ich habe nur darüber nachgedacht, ob ich das ändern sollte, aber ohne Jquery wird es etwas unordentlich. Siehe diese Frage für Details.

4
Louis Maddox

Reine, leichte Javascript-Bibliothek: glattes Scrollen auf Github

2
Jeremy Lynch

Meine Lieblingsscroll-to-Bibliothek ist derzeit Zenscroll wegen der großen Auswahl an Funktionen und der kleinen Größe (derzeit nur 3,17 kb). 

In der Zukunft kann es sinnvoller sein, die native scrollIntoView - Funktionalität zu verwenden. Da sie jedoch heutzutage aufgrund der fehlenden IE -Unterstützung in den meisten Produktionsstätten mehrfach gefüllt werden muss, empfehle ich stattdessen Zenscroll auf alle Fälle. 

1
Zach Saucier

Versuchen Sie diesen Code hier:

window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
    });
1
Alberto Junior

Vanilla js Variante mit requestAnimationFrame mit Beschleunigungen und allen unterstützten Browsern:

const requestAnimationFrame = window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame;

function scrollTo(to) {
    const start = window.scrollY || window.pageYOffset
    const time = Date.now()
    const duration = Math.abs(start - to) / 3;

    (function step() {
        var dx = Math.min(1, (Date.now() - time) / duration)
        var pos = start + (to - start) * easeOutQuart(dx)

        window.scrollTo(0, pos)

        if (dx < 1) {
            requestAnimationFrame(step)
        }
    })()
}

Jede Erleichterung unterstützt!

1
user1444621

Reibungsloses Scrollen mit Polyfill ...

Beispiel:

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

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

1
M N Fuad

sie können diese Javascript-Bibliothek verwenden, um einen reibungslosen Bildlauf zu allen Ihren internen Links hinzuzufügen. Sie können auch eine Konfiguration hinzufügen, um Links zum Ignorieren bereitzustellen . Sie können hier einen detaillierten Blick haben . https://codingninjascodes.github.io/SmoothScrollJs/

0
user3147343

Es ist eine aktualisierte Version von @Ian

// Animated scroll with pure JS
// duration constant in ms
const animationDuration = 600;
// scrollable layout
const layout = document.querySelector('main');
const fps = 12;  // in ms per scroll step, less value - smoother animation
function scrollAnimate(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);
            var value =  (from + step * (to - from)) + unit;
            if (prop) {
                elem[style] = value;
            } else {
                elem.style[style] = value;
            }
            if (step === 1) {
                clearInterval(timer);
            }
        }, fps);
    if (prop) {
        elem[style] = from + unit;
    } else {
        elem.style[style] = from + unit;
    }
}

function scrollTo(hash) {
    const target = document.getElementById(hash);
    const from = window.location.hash.substring(1) || 'start';
    const offsetFrom = document.getElementById(from).offsetTop;
    const offsetTo = target.offsetTop;
    scrollAnimate(layout,
        "scrollTop", "", offsetFrom, offsetTo, animationDuration, true);
    setTimeout(function () {
      window.location.hash = hash;
    }, animationDuration+25)
};

// add scroll when click on menu items 
var menu_items = document.querySelectorAll('a.mdl-navigation__link');
menu_items.forEach(function (elem) {
    elem.addEventListener("click",
        function (e) {
            e.preventDefault();
            scrollTo(elem.getAttribute('href').substring(1));
        });
});

// scroll when open link with anchor 
window.onload = function () {
    if (window.location.hash) {
        var target = document.getElementById(window.location.hash.substring(1));
        scrollAnimate(layout, "scrollTop", "", 0, target.offsetTop, animationDuration, true);
    }
}
0

Für jeden im Jahr 2019 fügen Sie zunächst einen Ereignis-Listener hinzu

  document.getElementById('id').addEventListener('click', () => scrollTo())

dann zielen Sie auf das Element und gehen reibungslos darauf zu

function scrollTo() {
    let target = document.getElementById('target');
    target.scrollIntoView({
        behavior: "smooth", 
        block: "end", 
        inline: "nearest"
    })
}
0

Hier ist eine einfache Lösung in reines JavaScript. Es nutzt die CSS-Eigenschaft Scroll-Verhalten: glatt

function scroll_to(id) {       
    document.documentElement.style.scrollBehavior = 'smooth'
    element = document.createElement('a');
    element.setAttribute('href', id)
    element.click();
}

Verwendungszweck

Angenommen, wir haben 10 Divs:

<div id='df7ds89' class='my_div'>ONE</div>
<div id='sdofo8f' class='my_div'>TWO</div>
<div id='34kj434' class='my_div'>THREE</div>
<div id='gbgfh98' class='my_div'>FOUR</div>
<div id='df89sdd' class='my_div'>FIVE</div>
<div id='34l3j3r' class='my_div'>SIX</div>
<div id='56j5453' class='my_div'>SEVEN</div>
<div id='75j6h4r' class='my_div'>EIGHT</div>
<div id='657kh54' class='my_div'>NINE</div>
<div id='43kjhjh' class='my_div'>TEN</div>

Wir können zur ID der Wahl scrollen

scroll_to('#657kh54')

Sie müssen einfach diese Funktion bei Ihrem Klickereignis aufrufen (z. B. Klicken Sie auf die Schaltfläche und scrollen Sie dann zu div # 9). 

Ergebnis

 enter image description here

Im wirklichen Leben sieht es natürlich viel ruhiger aus. 

GEIGE

Leider unterstützen IE und Safari ab 2019 keine ScrollBehavior = 'smooth'.

 enter image description here MDN Web Docs

0
Cybernetic