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

Hier ist die Lösung, die ich für mehrere Links und Anker implementiert habe, um einen reibungslosen Bildlauf zu ermöglichen:

http://www.adriantomic.se/development/jquery-localscroll-tutorial/ wenn Sie Ihre Navigationslinks in einem Navigations-Div eingerichtet und mit dieser Struktur deklariert haben:

<a href = "#destinationA">

und Ihre entsprechenden Anker-Tag-Ziele wie folgt:

<a id = "destinationA">

Laden Sie diese dann einfach in den Kopf des Dokuments:

    <!-- Load jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<!-- Load ScrollTo -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>

<!-- Load LocalScroll -->
<script src="http://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7-min.js"></script>

<script type = "text/javascript">
 $(document).ready(function()
    {
        // Scroll the whole document
        $('#menuBox').localScroll({
           target:'#content'
        });
    });
</script>

Dank an @Adriantomic

Answer 2

Danke für den Austausch, Joseph Silber. Hier Ihre Lösung 2018 als ES6 mit einer kleinen Änderung, um das Standardverhalten zu erhalten (nach oben scrollen):

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

    const targetElement = document.querySelector(this.getAttribute("href"));
    targetElement.scrollIntoView({
      block: "start",
      alignToTop: true,
      behavior: "smooth"
    });
  });
});

Answer 3

Erfordert jquery und animiert zum Anker-Tag mit dem angegebenen Namen anstelle von id, während die Raute zur Browser-URL hinzugefügt wird. Behebt auch einen Fehler in den meisten Antworten mit jquery, wo das #-Zeichen nicht mit einem Backslash vorangestellt wird. Die Schaltfläche "Zurück" navigiert leider nicht richtig zu vorherigen Hash-Links zurück...

$('a[href*=\\#]').click(function (event)
{
    let hashValue = $(this).attr('href');
    let name = hashValue.substring(1);
    let target = $('[name="' + name + '"]');
    $('html, body').animate({ scrollTop: target.offset().top }, 500);
    event.preventDefault();
    history.pushState(null, null, hashValue);
});

Answer 4

Nun, die Lösung hängt von der Art des Problems, ich benutze die Javascript animate Methode für die Schaltfläche klicken. und ich benutze Codes von unten Links für die Navbar

https://css-tricks.com/snippets/jquery/smooth-scrolling/

$(document).ready(function () {
  $(".js--scroll-to-plans").click(function () {
    $("body,html").animate(
      {
        scrollTop: $(".js--section-plans").offset().top,
      },
      1000
    );
    return false;
  });

  $(".js--scroll-to-start").click(function () {
    $("body,html").animate(
      {
        scrollTop: $(".js--section-features").offset().top,
      },
      1000
    );
    return false;
  });

  $('a[href*="#"]')
  // Remove links that don't actually link to anything
  .not('[href="#"]')
  .not('[href="#0"]')
  .click(function(event) {
    // On-page links
    if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname
    ) {
      // Figure out element to scroll to
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      // Does a scroll target exist?
      if (target.length) {
        // Only prevent default if animation is actually gonna happen
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000, function() {
          // Callback after animation
          // Must change focus!
          var $target = $(target);
          $target.focus();
          if ($target.is(":focus")) { // Checking if the target was focused
            return false;
          } else {
            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
            $target.focus(); // Set focus again
          };
        });
      }
    }
  });
});