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

HTML

<a href="#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

oder mit absoluter vollständiger URL

<a href="https://somewebsite.com/#target" class="smooth-scroll">
    Link
</a>
<div id="target"></div>

jQuery

$j(function() {
    $j('a.smooth-scroll').click(function() {
        if (
                window.location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
            &&  window.location.hostname == this.hostname
        ) {
            var target = $j(this.hash);
            target = target.length ? target : $j('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $j('html,body').animate({
                    scrollTop: target.offset().top - 70
                }, 1000);
                return false;
            }
        }
    });
});

Answer 2

Die angegebene Antwort funktioniert, deaktiviert aber die ausgehenden Links. Unten eine Version mit einem zusätzlichen Bonus zu erleichtern (Swing) und respektiert ausgehende Links.

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

        var target = this.hash;
        var $target = $(target);

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

Answer 3

Getesteter und überprüfter Code

<script>
jQuery(document).ready(function(){
// Add smooth scrolling to all links
jQuery("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  jQuery('html, body').animate({
    scrollTop: jQuery(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
} // End if
});
});
</script>

Answer 4

Ich füge dies hinzu:

function () {
    window.location.hash = href;
}

den vertikalen Versatz irgendwie aufhebt

top - 72

in Firefox und IE, aber nicht in Chrome. Grundsätzlich scrollt die Seite reibungslos bis zu dem Punkt, an dem sie aufgrund des Versatzes anhalten sollte, springt dann aber an die Stelle zurück, an der die Seite ohne den Versatz stehen würde.

Die Raute wird an das Ende der URL angehängt, aber wenn Sie auf "Zurück" klicken, gelangen Sie nicht zum Anfang zurück, sondern die Raute wird einfach aus der URL entfernt und das Anzeigefenster bleibt, wo es ist.

Hier ist das vollständige js, das ich verwende:

var $root = $('html, body');
$('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top - 120
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

Answer 5

$("a").on("click", function(event){
    //check the value of this.hash
    if(this.hash !== ""){
        event.preventDefault();

        $("html, body").animate({scrollTop:$(this.hash).offset().top}, 500);

        //add hash to the current scroll position
        window.location.hash = this.hash;

    }

});