JQuery implementiert einfach ein reibungsloses Scrollen des Ankers links_jquery

Wenn Sie einen Ankerpunkt verwenden, um zu einer bestimmten Position auf der Seite zu springen, springt dieser im Allgemeinen sofort zur angegebenen Position. Manchmal möchten wir jedoch einen reibungslosen Übergang zur angegebenen Position erreichen. Dann können wir dies einfach mit JQuery erreichen Wirkung. :

Hier springen wir beispielsweise zum angegebenen Ort mit der Inhalts-ID, indem wir auf das Tag klicken.

<a id="turnToContent" href="#content"></a>

Dann setzen wir den Inhaltsblock mit der ID als Inhalt an der gewünschten Stelle. Hier wird ein Div verwendet, um einen Artikel zu simulieren, der nicht wie ein Artikel aussieht. Platzieren Sie dieses Div am besten hinten, damit der Effekt deutlicher wird. Wenn Sie diesen Effekt nur testen möchten, können Sie eine einfache und grobe Methode verwenden und viele

-Tags davor platzieren.

<div id="content">
<h2>
<a href="###">HTML5</a>
</h2>
<p>
html5html5html5
</p>
<p class="addMes">标签： <span>HTML5</span><small>2015年4月19日</small></p>
</div>

Schließlich wird JQuery verwendet, um den reibungslosen Übergangseffekt zu erzielen:

$('#turnToContent').click(function () {
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
return false;
});

Fertig!

Lasst es uns weiter verbessern,

$(function(){  
  $('a[href*=#],area[href*=#]').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body').animate({
          scrollTop: targetOffset
        },
        1000);
        return false;
      }
    }
  });
})

Der Vorteil des verbesserten Codes besteht darin, dass durch Klicken auf den Ankerlink reibungslos zum Ankerpunkt gescrollt wird und das Browser-URL-Suffix nicht das Wort „Anker“ enthält. Es kann implementiert werden, ohne den obigen Code während der Verwendung zu ändern.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.