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

Dies erleichtert es jQuery, Ihren Ziel-Hash zu erkennen und zu wissen, wann und wo es aufhören soll.

$('a[href*="#"]').click(function(e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});

Answer 2

Diese Lösung funktioniert auch für die folgenden URLs, ohne dass Ankerlinks zu verschiedenen Seiten unterbrochen werden.

http://www.example.com/dir/index.html
http://www.example.com/dir/index.html#anchor

./index.html
./index.html#anchor

usw.

var $root = $('html, body');
$('a').on('click', function(event){
    var hash = this.hash;
    // Is the anchor on the same page?
    if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) {
        $root.animate({
            scrollTop: $(hash).offset().top
        }, 'normal', function() {
            location.hash = hash;
        });
        return false;
    }
});

Ich habe dies noch nicht in allen Browsern getestet.

Answer 3

Ich habe dies für beide href-Anker "/xxxxx#asdf" und "#asdf" getan

$("a[href*=#]").on('click', function(event){
    var href = $(this).attr("href");
    if ( /(#.*)/.test(href) ){
      var hash = href.match(/(#.*)/)[0];
      var path = href.match(/([^#]*)/)[0];

      if (window.location.pathname == path || path.length == 0){
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
        window.location.hash = hash;
      }
    }
});

Answer 4

Vergessen Sie nicht, dass die Funktion offset() die Position Ihres Elements an das Dokument weitergibt. Wenn Sie also Ihr Element relativ zu seinem Elternteil scrollen müssen, sollten Sie diese Funktion verwenden;

    $('.a-parent-div').find('a').click(function(event){
        event.preventDefault();
        $('.scroll-div').animate({
     scrollTop: $( $.attr(this, 'href') ).position().top + $('.scroll-div').scrollTop()
     }, 500);       
  });

Der springende Punkt ist, scrollTop von scroll-div zu erhalten und es zu scrollTop hinzuzufügen. Wenn Sie nicht tun, dass position() Funktion gibt Ihnen immer verschiedene Positionswerte.

Answer 5

Wenn Sie eine einfache Schaltfläche auf der Seite haben, um nach unten zu einem div zu blättern und die Zurück-Taste zu arbeiten, indem Sie nach oben springen, fügen Sie einfach diesen Code hinzu:

$(window).on('hashchange', function(event) {
    if (event.target.location.hash=="") {
        window.scrollTo(0,0);
    }
});

Dies könnte erweitert werden, um zu verschiedenen Divs zu springen, durch das Lesen der Hash-Wert, und Scrollen wie Joseph Silbers Antwort.