Heim > Web-Frontend > H5-Tutorial > Hauptteil

So verwenden Sie den Link

不言
Freigeben: 2018-11-06 15:05:40
Original
3557 Leute haben es durchsucht

Mit dem Aufkommen einseitiger Websites ist die Nutzung des Scrollens als Methode zum Navigieren auf langen Seiten immer beliebter geworden. Dieser kleine Teil ist in JS + jQuery-Code implementiert und Sie können problemlos Links in Navigationselementen setzen, um zum entsprechenden Teil der Seite zu scrollen. Wenn Sie möchten, dass das Anker-Tag zur Seite hinzugefügt wird, wenn JS nicht vorhanden ist.

Kaffeeskript:

$("nav").find("a").click (e) ->
    e.preventDefault()
    section = $(this).attr "href"
    $("html, body").animate
        scrollTop: $(section).offset().top
Nach dem Login kopieren

oder JS:

$("nav").find("a").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top    });});
Nach dem Login kopieren

und einige Beispiel-HTML

<nav>
    <a href="#welcome">Welcome</a>
    <a href="#about">About</a>
    <a href="#section3">Section 3</a>
</nav>
<div id="welcome">Welcome to this website</div>
<div id="about">About this website, and such</div>
<div id="section3">The third section</div>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Link

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!