suchen

Heim  >  Artikel  >  Web-Frontend  >  So verwenden Sie den Link

So verwenden Sie den Link

不言
不言Original
2018-11-06 15:05:403608Durchsuche

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

oder JS: 

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

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>

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Link

jquery html coffeescript JS
Stellungnahme：
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
Vorheriger Artikel：Beispiel für das Hochladen von Dateien mit jQuery HTML5 und FormDataNächster Artikel：Beispiel für das Hochladen von Dateien mit jQuery HTML5 und FormData

In Verbindung stehende Artikel

Mehr sehen