Sanfter Bildlauf beim Anklicken eines Ankerlinks

Question

Ich habe einige Hyperlinks auf meiner Seite. Eine FAQ, die die Benutzer lesen, wenn sie meinen Hilfebereich besuchen.

Mit Hilfe von Anker-Links kann ich die Seite zu dem Anker scrollen lassen und die Benutzer dorthin führen.

Gibt es eine Möglichkeit, den Bildlauf reibungslos zu gestalten?

Aber beachten Sie, dass er eine benutzerdefinierte JavaScript-Bibliothek verwendet. Vielleicht bietet jQuery etwas wie dies in eingebettet?

Answer 1

Update April 2018: Jetzt gibt es eine einheimische Methode, dies zu tun :

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Dies wird derzeit nur von den modernsten Browsern unterstützt.

---

Wenn Sie ältere Browser unterstützen, können Sie diese jQuery-Technik verwenden:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

Und hier ist die Fiedel: http://jsfiddle.net/9SDLw/

---

Wenn Ihr Zielelement keine ID hat und Sie einen Link zu ihm über seine name verwenden Sie dies:

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

---

Um die Leistung zu erhöhen, sollten Sie den Cache $('html, body') Selektor, so dass es nicht zu einer jedes einzelne Mal ein Anker angeklickt wird:

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

---

Wenn Sie möchten, dass die URL aktualisiert wird, tun Sie dies innerhalb der animate Rückruf:

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

Answer 2

Der neue Schrei in CSS3. Diese Methode ist viel einfacher als alle anderen auf dieser Seite aufgeführten Methoden und erfordert kein Javascript. Geben Sie einfach den unten stehenden Code in Ihr CSS ein, und plötzlich werden Links, die auf Orte innerhalb Ihrer eigenen Seite verweisen, eine sanfte Bildlaufanimation haben.

html{scroll-behavior:smooth}

Danach werden alle Links, die auf ein Div verweisen, nahtlos zu diesen Abschnitten übergehen.

<a href="#section">Section1</a>

Edit: Für diejenigen, die über das oben genannte Tag verwirrt sind. Im Grunde ist es ein Link, der anklickbar ist. Sie können dann ein anderes div-Tag irgendwo in Ihrer Webseite haben wie

<div id="section">content</div>

In diesem Zusammenhang wird der Link anklickbar sein und wird zu dem gehen, was #section ist, in diesem Fall ist es unser div wir genannt Abschnitt.

Übrigens habe ich Stunden damit verbracht, dies zum Laufen zu bringen. Ich fand die Lösung in einem obskuren Kommentarbereich. Sie war fehlerhaft und funktionierte in einigen Tags nicht. Im Textkörper funktionierte es nicht. Es funktionierte schließlich, als ich es in html{} in der CSS-Datei einfügte.

Answer 3

Die korrekte Syntax lautet:

//Smooth scrolling with links
$('a[href^=\\#]').on('click', function(event){     
    event.preventDefault();
    $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});

// Smooth scrolling when the document is loaded and ready
$(document).ready(function(){
  $('html,body').animate({scrollTop:$(location.hash).offset().top}, 500);
});

Vereinfachung : DRY

function smoothScrollingTo(target){
  $('html,body').animate({scrollTop:$(target).offset().top}, 500);
}
$('a[href^=\\#]').on('click', function(event){     
    event.preventDefault();
    smoothScrollingTo(this.hash);
});
$(document).ready(function(){
  smoothScrollingTo(location.hash);
});

Erläuterung der href^=\\# :

• ^ bedeutet, dass es dem entspricht, was in # Zeichen. Daher nur Übereinstimmung Anker um sicherzustellen, dass es sich um einen Link auf dieselbe Seite handelt (Danke Peter Wong für Ihre Anregung).
• \\ ist, weil die # ist ein spezielles Zeichen in einem CSS-Selektor, daher müssen wir es ausblenden.

Answer 4

Nur CSS

html {
    scroll-behavior: smooth;
}

Alles, was Sie hinzufügen müssen, ist dies. Jetzt werden Ihre internen Links Scrollen Verhalten wird glatt wie ein Strom-Fluss sein.

Programmatisch: Etwas Besonderes und Fortgeschrittenes

// Scroll to specific values
// window.scrollTo or
window.scroll({
  top: 1000, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 250, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.getElementById('el').scrollIntoView({
  behavior: 'smooth'
})

Nota : Alle aktuellen Browser ( Opera , Chrome , Firefox usw.) unterstützt diese Funktion.

Für ein besseres Verständnis lesen Sie bitte dies Artikel

Answer 5

Ich bin überrascht, dass niemand eine native Lösung gepostet hat, die sich auch um die Aktualisierung des Browser-Speicherort-Hashs kümmert, damit er passt. Hier ist sie:

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

Siehe Lernprogramm: http://www.javascriptkit.com/javatutors/scrolling-html-bookmark-javascript.shtml

Für Websites mit klebrigen Kopfzeilen, scroll-padding-top CSS kann verwendet werden, um einen Versatz zu erzeugen.